Multiple sliders on same page using lazyLoad: 'ondemand' not displaying images on second slider?

[Lippiun]

Hello,

I have setup two sliders to be on the same page, one for the carousel and the other for the thumbnails to be displayed in.

When I set both to be lazyLoad: ondemand the slider which is being used for the thumbnails isn't loading the images and isn't is showing just the title. However, If i change the Thumbnails slider to be progressive they appear. I want to use ondemand though so they only load when they are active and not one after the other when the page is loading.

I have set both sliders HTML to display data-src, data-srcset and data-sizes. Is there something different i have to do to make two sliders on the same page lazyload?

var $slickElement = $('.projects_slider');
var $slickThumbnail = $('.projects_thumbnail');

$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
  lazyLoad: 'ondemand',
  slidesToShow: 1,
  slidesToScroll: 1,
  fade: true,
  autoplay: false,
  cssEase: 'linear',
  asNavFor: $slickThumbnail,
  rows: 0,
  prevArrow: "<span class='prevarrow'></span>",
  nextArrow: "<span class='nextarrow'></span>"
});

$slickThumbnail.slick({
  lazyLoad: 'ondemand',
  slidesToShow: 10,
  slidesToScroll: 1,
  fade: false,
  autoplay: false,
  asNavFor: $slickElement,
  rows: 0,
  focusOnSelect: true,
  prevArrow: false,
  nextArrow: false
});

[maamounkhlifi]

I had the same issue with 2 sliders, any solution?

[CedricHadjian]

Same issue, any solution?

[saiballo]

same here!