I'm using slick.js as a content browser. As such, my slider has a number of images to peruse through. I'd like to be able to refresh the web page and have slick remember the last slide I was viewing. I'm new to jquery and javascript so any guidance would be appreciated.
Here's the code I'm working with:
$(document).ready(function(){
// Carousel Options
$('.mycarousel').slick({
infinite: true,
accessibility: true, mobileFirst: true,
adaptiveHeight: true,
arrows: false, draggable: true,
useCSS: true, cssEase:'linear', focusOnSelect: true,
dots: true, appendDots:$(document.innerHTML = "<p> </p>"),
lazyLoad: 'ondemand',
});
$('.leftArrow').on('click', function(){
$('.mycarousel').slick("slickPrev");
});
$('.rightArrow').on('click', function(){
$('.mycarousel').slick("slickNext");
});
$(window).on('resize orientationchange', function() {
$('.mycarousel').slick('resize');
});
});
I myself did some research and this is what I found:
$('#yourCarousel').on('slid.bs.carousel', function () {
var currentSlide = $('#yourCarousel div.active').index();
sessionStorage.setItem('lastSlide', currentSlide);
});
if(sessionStorage.lastSlide){
$("#yourCarousel").carousel(sessionStorage.lastSlide*1);
}
Instead of sessionStorage you could also use:
localStorage.setItem('lastSlide', currentSlide)
Related
I have a slick slider on my website, and i'm using also jquery-mousewheel to switch slides. The issue is that i want to disable the mousewheel while it's sliding.
Do you know how i can do this ?
function detectScroll() {
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
detectScroll()
I found a solution!
The thing is that I had to declare a boolean that i called animating. Then I used the on('beforeChange') and on('afterChange') of slick to detect rather the animation is finished or not. And I just had to check if the the animating is true or false in the beginning of the mousewheel function and return false if it's true.
I hope it would help a lot of people!
var animating = false;
function detectScroll() {
$('body').bind('mousewheel', function(e){
//If animated than we wait the animation to be over
if (animating) {
return false;
}
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
$('.slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){
animating = true;
}).on('afterChange', function(event, slick, currentSlide, nextSlide){
animating = false
});
detectScroll()
This is a weird one for me. I have a Slick.js Carousel, and after it initializes, I was to check the window width, and if the width is small enough, ADD a new slide to the beginning of the carousel.
JS:
var posterSlide = "<div class='item mobile-poster'>PUT STUFF IN HERE</div>"
$(document).ready(function(){
$('.featured-carousel').on('init', function(event, slick){
console.log('on init');
if ($(window).width() < 737) {
addPosterSlide();
}
});
$('.featured-carousel').slick({
dots: true,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
});
function addPosterSlide(){
$('.featured-carousel').slick('slickAdd', posterSlide, true);
}
The Slick.js Carousel loads in correctly, and the init call fires, but then I get a Uncaught TypeError Cannot read property 'slickAdd' of undefined INSIDE the function that is seeing is the slider has been initialized.
Found jsfiddle online having same issue I am facing:
JSfiddle Link
Steps to reproduce:
1) click on pause
2) open new tab or go to an existing tab
3) coming back to the jsfiddle link
Auto play starts even when pause was clicked before. Not maintaining its current state when coming back from the new tab.
$(".slider").slick({
autoplay: true,
dots: true,
pauseOnDotsHover: true,
autoplaySpeed: 1000,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true);
});
I have used following code to make it work and solve my issue.
I have also stopped auto play when paused which worked perfectly.
$( document ).ready(function() {
$(".slider").slick({
autoplay: true,
dots: true,
pauseOnDotsHover: true,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false)
.slick('slickSetOption', 'autoplay', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true)
.slick('slickSetOption', 'autoplay', true);
});
$('.slider').slick('slickPlay');
});
Looks like the script is listening for some event. Best workaround I can think of is to disable autoplay, then use $.ready to trigger a click on .play:
$(function() {
$(".play").click();
});
A valid solution to your problem is to initialize the carousel with autoplay: false and after that call the function $('.slider').slick('slickPlay'); manually inside the $( document ).ready function to play the carousel, like:
$( document ).ready(function() {
$(".slider").slick({
autoplay: false,
dots: true,
pauseOnDotsHover: true,
});
$('.pause').on('click', function() {
$('.slider')
.slick('slickPause')
.slick('slickSetOption', 'pauseOnDotsHover', false);
});
$('.play').on('click', function() {
$('.slider')
.slick('slickPlay')
.slick('slickSetOption', 'pauseOnDotsHover', true);
});
$('.slider').slick('slickPlay');
});
I tested it and is working as you want. I hope that can help you.
if ($('.slide_home').length) {
$('.slide_home').slick({
arrows: true,
dots: true,
autoplay: true,
autoplaySpeed: 5000,
speed: 1200,
fade: true,
swipe: false
});
$('.slide_home .slick-dots').append('<span class="pause float-right mt-1"><i class="fas fa-pause" style="color: #2e4486"></i></span>');
$('.slide_home .slick-dots').append('<span class="play float-right mt-1 d-none"><i class="fas fa-play" style="color: #2e4486"></i></span>');
$('.pause').on('click', function(e) {
e.preventDefault();
$('.slide_home')
.slick('slickPause')
$('.play')
.removeClass('d-none');
$('.pause')
.addClass('d-none')
});
$('.play').on('click', function(e) {
e.preventDefault();
$('.slide_home')
.slick('slickPlay');
$('.pause')
.removeClass('d-none');
$('.play')
.addClass('d-none')
});
}
I'm trying to sync a slick slider to an HTML select and having quite a hard time with it.
Here is my code :
$(function() {
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
autoplay: false,
draggable: false,
arrows: false,
swipe: false,
speed: 200,
fade: true,
lazyLoad: 'progressive',
cssEase: 'linear'
});
var select = $("#select");
var $carousel = $('.slick-slider');
$("#select").change(function() {
goTo = select.selectedIndex;
$carousel.slick("goTo", goTo);
});
});
There is the same amount of options/slides.
I've been trying different things but since I'm quite ignorant JavaScript wise, I'm still stuck..
https://jsfiddle.net/70he30n1/
->>> Solution : https://jsfiddle.net/gpuubf5y/7/
You can try this :
$( function() {
var $carousel = $('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
autoplay: false,
draggable: true,
arrows: false,
swipe: true,
speed:200,
fade: true,
lazyLoad: 'progressive',
cssEase: 'linear'
});
var select = $("#select");
$("#select").change( function() {
goTo = select.val();
console.log( goTo );
$carousel.slick( "goTo", goTo-1 );
});
});
Working demo : https://jsfiddle.net/gpuubf5y/
You don't need to access native properties via jQuery. If you change your select assignment to get the actual element, like so:
...
var $carousel = $('.slick-slider');
var select;
select = $("#select").change(function() {
goTo = select.selectedIndex;
$carousel.slick("goTo", goTo);
})[0];// array notation returns native
...
then the rest of your code should work without the need to use prop().
to reference the index of the option selected use
goTo = $("#select option:selected").index();
I want the bxSlider to automatically start the slideshow without the user clicking on it. This is my code (which isn't working):
slider = $('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
autoStart: true
});
slider.startAuto();
What's wrong with this? What happens is that images do load, but it never autoscrolls, the user always have to choose one of the pager dots to manually scroll through. What's wrong with my code?
You should use
$(document).ready(function(e) { });
or
$(window).ready(function(e) { });
in between the code.
so the correct one should be,
$(document).ready(function(e) {
$('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
});
});
hope this will help you...!
This Code worked for me!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
You can set wait on 0 if you don't want a delay. And because I used: pagerCustom: '#pager', I changed '.bx-pager' a into '#pager a'.
This was all , what was missing and i got it from bxslider official page
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
});
Try setting autoControls: true (from http://bxslider.com/examples/auto-show-start-stop-controls)
Okay! I got the same problem! And none of the solution worked above. But I found what was wrong!
1 - First Check and make sure you have auto:true in jQuery script like below:
$('.bxslider').bxSlider({
auto: true,
pause: 3000,
pager: true
});
2 - The main jQuery file that you are using, kindly update that jQuery file, you might be using old jQuery file! (#2 was the issue in case of mine)
Thanks!
This code is also working perfectly
jQuery(function(e){
jQuery('.bxslider').bxSlider({
mode: 'fade',
captions: true,
autoplay:true,
autoControls: true,
auto: true,
autoplaySpeed:1000
});
});
I suggest the following remedy. onSlideAfter is executed after each slide transition. Then this code will cause slider.startAuto() to be executed each time this happens, starting auto show.
var slider = $(".sliderBx ul").bxSlider({
auto: true,
pager: true,
controls: true,
onSlideAfter: function () {
slider.startAuto();
}
});