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

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