2

I'm trying to get lazySizes to work with slick.js. Does anyone have any solutions to make this work. I have a slider with roughly 40 images on it and I would like to lazy-load the images as needed or when the next slide is about to come up. I actually created a responsive background slider with lazySizes. My slider works except for the lazy-load part, on page load it loads in all 40 images at once. 

 <div class="full-screen-hero-background media-cover background-cover lazyload"
                 data-bgset="<?php echo $slider_image['sizes']['slider-image-small']; ?> [(max-width: 960px)] |
                        <?php echo $slider_image['sizes']['slider-image']; ?> [(max-width: 1280px)] |
                        <?php echo $slider_image['sizes']['slider-image-retina']; ?>"
                 data-sizes="auto" role="img" aria-label="<?php the_title(); ?>">
            </div>

here is my slick init

        autoplay: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplaySpeed: 2500,
        speed: 3500,
        fade: true,
        arrows: false,
        dots: false,
        pauseOnHover: false,
user3369825
  • 99
  • 1
  • 12

1 Answers1

0

Try using data-srcset="" attribute, instead of data-bgset=""

<!-- responsive example with automatic sizes calculation: -->
<img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" />

Read more about this: https://github.com/aFarkas/lazysizes#user-content-how-to

Stirling
  • 81
  • 5