How lazy load picture element in slick slider?

Question

Ken Wheelers slick slider works great with normal pictures like jpeg. To improve loading performance i try to work with the picture element to have webp support with fallback. The data-lazy attribute works only with the img tag. Is there a solution to lazy load also the webp images?

<div id="slick-slider">
   <div class="item">
      <picture >
         <source srcset="{{ bild }}.webp" type="image/webp">
         <img class="img-fluid" alt="bild 1" data-lazy="{{ bild }}.jpg">
      </picture>
  </div>
  <div class="item">
      <picture >
         <source srcset="{{ bild }}.webp" type="image/webp">
         <img class="img-fluid" alt="bild 2" data-lazy="{{ bild }}.jpg">
      </picture>
  </div>
</div>

Answer 1

as per source code :https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1541 only uses image tags. So short answer: you can write your own function to override the lazyload function , shouldn't be too hard.

Answer 2

The slick slider only supports the image tag but we can add some custom code to lazy load images for the picture tag.

Picture tag snippet

<picture>
  <source media="(min-width:650px)" data-lazy="img_pink_flowers.jpg">
  <source media="(min-width:465px)" data-lazy="img_white_flower.jpg">
  <img data-lazy="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

jQuery for lazy loading:

$('.slider-selector').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: false,
    dots: true,
    arrows: false,
});

$(document).on('beforeChange', '.slider-selector', function(event, slick, currentSlide, nextSlide){
    var nextSlide = slick.$slides.get(nextSlide);
    var $slideSoureSets = $(nextSlide).find('source');
    $($slideSoureSets).each(function () {
        $(this).attr('srcset', $(this).data('lazy'));
    });
        console.log(nextSlide);
  });