Loading image and play slider when reach viewport, lazy Loading

[casper66m]

Hi, Thanks for great work, My site have multiple slider one in bottom , one in middle and one in top. For website performance I want middle slider and bottom slider load image and play when user scroll to them ( slider loads and play image when reach viewport), How I implement this? Thank you again

[Jinukurian7]

You can use slick slider lazy loading.

<img data-lazy="img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

Check this CODEPEN for example.

You can trigger the slider when you reach a certain viewpoint by integrating with scrollmagic plugin

var controller = new ScrollMagic.Controller();
// build scene
var scene = new ScrollMagic.Scene({
    triggerElement: '.slider-wrapper', 
    duration: 200,
    reverse: false
})
.addTo(controller)
.on('enter', function (e) {
    $('.slider').slick({
        [options]
    });
})