Reputation: 948

slick carousel individual slide duration

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/

Upvotes: 4

Answers (7)

zwadl

Reputation: 34

Tried those answers, didn´t work for me. This does...

What I wanted to achieve was that the first slide should be shown longer then the others. So you can set a default duration for all slides but I want to show a video in the first slide so I need it so stay for 12 seconds which would then be to long/boring for the other slides which should be shown for 7 seconds only.

Also I only needed it to do that for the very first slide as the video then stops and shows a static image. But I guess that example can be expanded to have custom slide-show-times for each slide fairly easy.

$(document).ready(function(){
    var intervalId = 0;
    $slider = $('#homeslider');
    
    var myslider, currentActiveSlide, defaultSpeed = 7000, initSpeed;
    var firstTime = true;
    
    if($('.firstSlide').data('slideshowtime') !== 0 && $('.firstSlide').data('slideshowtime')*1000 != defaultSpeed) {
        initSpeed = $('.firstSlide').data('slideshowtime')*1000;
        firstTime = false;
    } else {
        initSpeed = defaultSpeed;
    }
    
    $slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        currentActiveSlide = slick.$slides.eq(nextSlide);
        
        if(currentActiveSlide.find('.sliderContent').data('slideshowtime') != 0 && firstTime) {
            myslider[0].slick.autoPlayClear;
            myslider[0].slick.options.autoplaySpeed = currentActiveSlide.find('.sliderContent').data('slideshowtime') * 1000;
            myslider[0].slick.autoPlay;
            firstTime = false;
        } else {
            if(myslider[0].slick.options.autoplaySpeed != defaultSpeed) {
                myslider[0].slick.autoPlayClear;
                myslider[0].slick.options.autoplaySpeed = defaultSpeed;
                myslider[0].slick.autoPlay;
            }
        }
    });
    
    myslider = $slider.slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: initSpeed,
        centerMode: false,
        variableWidth: false,
        prevArrow: '<button type="button" class="slick-prev"></button>',
        nextArrow: '<button type="button" class="slick-next"></button>'
    }); 

});

<!-- the html -->

<div id="homeslider">
    <div>
        <div class="firstSlide sliderContent" data-slideshowtime="0"></div>
    </div>
    <!-- more slides -->
</div>

Upvotes: 0

Ali Kouroshfar

Reputation: 78

I fixed the above code https://stackoverflow.com/a/45593522/2931874 The problems that were fixed are Prev slide had the wrong time, because the code just set the next slide for the duration. And Important correction was clearInterval, all was worked correctly until we change the slide with swipe or arrow. so i removed the prev interval.

let intervalId = 0;
    if ($slider.length > 0) {
        $slider.slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: false,
            speed: 1000
        });

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

        $slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            currActiveSlide = slick.$slides.eq(nextSlide);
        });

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

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

Upvotes: 0

Alex Kleshchevnikov

Reputation: 364

I would prefer to use slider.slick('slickCurrentSlide') to get the current slide position instead of using increment counter. This will also exclude issue when using arrows and manual switching between slides. And also no need too use map for slides.

var changeSlide = function(timing) {
  setTimeout(function() {
    if (timing !== 0) {
      slider.slick('slickNext');
    }
    changeSlide(slider.find('.slick-slide')[slider.slick('slickCurrentSlide')].getAttribute('data-time'));
  }, timing);
}
changeSlide(0);

Upvotes: 0

DLS123321

Reputation: 33

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'));
    }

Upvotes: 2

Calsal

Reputation: 1485

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

Upvotes: 14