Slick-Carousel autoplay starting when element in view

Question

I use the autoplay function in slick slider to change the slides every 10 seconds:

jQuery(window).on('load resize', function () {
    jQuery('.slider').not('.slick-initialized').slick({
        arrows: false, 
        dots: true, 
        autoplay: true,
        autoplaySpeed: 10000,
        speed: 1500
    });
});

The autoplaySpeed function starts counting when the page is loaded but i want to start the count just when the slick-element comes into view. How is it possible to load the slider on page load but start autoplay when the element arrives in the viewport?

score 0 · Answer 1 · answered Jan 13 '21 at 16:10

You can set autoplay: false when you initialize your slideshow and then when the slideshow enters the viewport, you can set the option to true.

$('.slider').slick('slickSetOption', 'autoplay', true);

To detect when the element comes into view, see: How can I tell if a DOM element is visible in the current viewport?

Slick-Carousel autoplay starting when element in view

1 Answers1