Slick: Lazy load always loading minimum 3 images.

[gety9]

When using lazy load on demand it always loads 3 images, even if the slider is no visible/active yet. How can I make it load only 1 image? Basically first image of slider is shown, and if user did not slide to others, than other are never loaded.

I am showing/scrolling only 1 image at a time (

[jkorejtko]

We don't know/see, how do you use it.

If I set this simply code, then it works it:

$(".YOUR-SELECTOR-CAROUSEL").slick({
   lazyLoad: 'ondemand',
   slidesToShow: 3,
   slidesToScroll: 1,
   responsive: [{
      breakpoint: 1024,
         settings: {
            slidesToShow: 2,
            slidesToScroll: 1
         }
      }, {
      breakpoint: 480,
         settings: {
            slidesToShow: 1,
            slidesToScroll: 1
         }
   }],
   prevArrow: '<i class="icon-chevron-sign-left"></i>',
   nextArrow: '<i class="icon-chevron-sign-right"></i>'
});

You have mobile response (less 480px), you click to arrow and image is loaded by LAZYLOAD.

You have to set:

slidesToShow: 1

If it doesn't work, then you have some JS problem probably. The best way is codepen or jsfiddle and insert here like new comment.

[leggomuhgreggo]

Expected behavior right? Should have the initial view set so there's no flash of unloaded images. Let me know if I'm overlooking something.

[aladaghlou]

Hi.
I am need to preload only 1 image instead 3 images.
Is there an option to do this?

See this sample:
https://jsfiddle.net/aladaghlou/8p2ghnd9/2/

[andynedine]

It's because of "fade". If you use this animation, you'll need to know previous and next image to get that effect. Try to remove "fade" property ;)