当元素在视图中时，Slick-Carousel 自动播放

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?

Answer 1

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?