slick carousel individual slide duration

Question

Looking for a way to use slick carousel and be able to change the amount of time the slide is displayed on an individual slide basis.

In case I'm not explaining it well, assume I have 5 slides. I want to be able to define the display of slide one for 5s, slide 2 for 10s, slide 3 for 7s, etc...

ref: http://kenwheeler.github.io/slick/

Answer 1

May be you can have a look here: https://wordpress.org/plugins/wp-slick-slider-and-image-carousel/

Hope that helps!

Answer 2

I was looking for the same thing but since I did not find any answer to setting an individual slide duration I built it with a recursive function that calls the 'slickNext' after timeout. The duration for each slide is stored in a data-attribute and then I save all durations in a list.

var durationList = $('.slider__item').map(function(index, item) {
    return item.getAttribute('data-time');
});

var slideIndex = 0;
var changeSlide = function(timing) {
    setTimeout(function() {
        if (timing !== 0) slider.slick('slickNext');
        if (slideIndex >= durationList.length) slideIndex = 0; //Start from beginning?
        changeSlide(durationList[slideIndex++]); //Calls itself with duration for next slide
    }, timing);
}

changeSlide(0);

See full example: http://codepen.io/calsal/pen/rLwydX

Answer 3

Yes.You can use bootstrap carousel and set the "data-interval" attribute based on your requirement.

Refer: How to change the interval time on bootstrap carousel?

Answer 4

The above accepted question only works if your Slickslider fades to the next slide. If you use the default settings of Slick, the slider creates cloned slides, which means your data-attribute will be placed on a different slide, and the timing will be off for once in a while.

The code profided below will fix this problem.

 /* Init slider */
if ($slider.length > 0) {
        $slider.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
            arrows: false,
            speed: 1000

        });
        var activeSlides,
            currActiveSlide,
            firstSlide =  $slider.find("[data-slick-index='0']");

        $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
            activeSlides = slick.$slides;
            $.each(activeSlides, function(k, v){
                if ($(v).hasClass('slick-active')){
                    if ($(v).next().length){
                        currActiveSlide = $(v).next();
                    } else {
                        currActiveSlide = firstSlide;
                    }
                    return;
                }
            });
        });

        $slider.on('afterChange', function(event, slick){
            setTimeout(function(){
                $slider.slick('slickNext');
            }, currActiveSlide.data('time')-1000); 
        });

        // on init
        setTimeout(function(){
            $slider.slick('slickNext');
        },firstSlide.data('time'));
    }