Lazy load images in slick_slider are not being used by CDN

Question

I am having an issue with my slider. We use Slick slider which we like very much.. However we noticed via dev tools that only the first image in our slider is being used by our CDN. While the others which are using lazy load functionality is not being used by the CDN

This is how the cdn works

We use wpengine.com to host our wordpress site. They have max-cdn built into our install and all images we use on the site or upload to the media library are "CDN" links when you look at them in dev tools.

So in our Header.php we have slider html like this:

<section class="lazy fade single-item slider" style="max-height:324px; 
overflow:hidden;">
    <a class="slide-link" href="#">
        <div>
            <img src="/images/img1.jpg">
        </div>
    </a>
    <a class="slide-link laz-slide" href="#">
        <div>
            <img data-lazy="/images/img2.jpg">
        </div>
    </a>
    <a class="slide-link laz-slide" href="#">
        <div>
            <img data-lazy="/images/img3.jpg">
        </div>
    </a>
</section>

You will notice that the first image tag is using src="" while the other images are using data-lazy=""

This lazy load function is built into slick slider - if you hit ctrl+f on that link and search "lazy" you can see how they reference it on the github page

My problem is that the image that are relyig on data-lazy="" for lazy loading are not being used by our CDN. However if i simply change them to src="" and save, when i check in dev tools it shows them all being loaded by CDN.

Can anyone think of a relatively simply solution that allows me to use both lazy-load and the CDN for my slick slider images?

Thanks

Solution

Hai Its working for me... please check the code and check this example CODEPEN

$(document).on('ready', function() {
      $(".regular").slick({
        lazyLoad: 'ondemand',
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
      });
      
    });

.slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black !important;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<section class="regular slider">
<div>
  <img data-lazy="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>
<div>
  <img data-lazy="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg">
</div>
<div>
  <img data-lazy="https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270">
</div>
<div>
  <img data-lazy="https://www.readree.com/wp-content/uploads/2021/01/Search-Engines-That-Search-for-Duplicate-images.jpg">
</div>
<div>
  <img data-lazy="https://www.readree.com/wp-content/uploads/2021/01/Search-Engines-That-Search-for-Duplicate-images.jpg">
</div>
<div>
  <img data-lazy="https://vinusimages.co/wp-content/uploads/2018/10/EG7A2390.jpgA_.jpg">
</div>
  <div>
  <img data-lazy="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg">
</div>
  <div>
  <img data-lazy="https://static.toiimg.com/thumb/msid-54559212,width-748,height-499,resizemode=4,imgsize-307081/.jpg">
</div>
  <div>
  <img data-lazy="https://st.depositphotos.com/1428083/2946/i/600/depositphotos_29460297-stock-photo-bird-cage.jpg">
</div>
  <div>
  <img data-lazy="https://www.whatsappimages.in/wp-content/uploads/2021/01/Boys-Feeling-Very-Sad-Images-Pics-Downlaod.jpg">
</div>
  </section>