Set autoplaySpeed per slide

[Rowdysign]

Hello,

I use Slick Slider a lot and I am really happy with it. Thanks a lot.

I would like to set autoplaySpeed per slide. I know this is partially achievable with the afterChange event, but I can only get it working if the slide that I want to show a little bit longer is not the first slide.

So my question is: how can I set a autoplaySpeed per slide but also for the first slide?

[ZsoltBenes]

Hello,

u can use .on('afterChange', ...

example code:

const slickSliderExample = jQuery('#slickSliderExample').slick({
    autoplay: true,
    autoplaySpeed: 3000, //First slide 3000
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    variableWidth: true,
    centerPadding: '0px',
    prevArrow: "<button type='button' class='slick-prev'></button>",
    nextArrow: "<button type='button' class='slick-next'></button>",
    // the magic
    responsive: [{
        breakpoint: 1200,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 1,
        }
    }, {
        breakpoint: 768,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            variableWidth: true,
            centerPadding: '0px'
        }
    }]
});

// Add the afterChange event handler
slickSliderExample.on('afterChange', function (event, slick, currentSlide) {
    // Check the current slide index and change autoplaySpeed accordingly
    if (currentSlide === 2) {
        // Change autoplaySpeed for the third slide
        slickSliderExample.slick('slickSetOption', 'autoplaySpeed', 500);
    } else {
        // Other slides
        slickSliderExample.slick('slickSetOption', 'autoplaySpeed', 1500);
    }
});