How to lazyload each slide of slick slider?

The following slick slider code has lazyload working on images but it still gives defer offscreen image issue on Google PageSpeed Insights. Does anyone have any idea about how to solve "defer offscreen images" issue on google page speed for slick slider?.

<div class="demo">
   <div>
       <a href="#" class="block-promo home-main">
          <img src="" data-lazy="https://via.placeholder.com/150"/>
       </a>
   </div>
   <div>
      <a href="#" class="block-promo home-main">
         <img src="" data-lazy="https://via.placeholder.com/150"/>
      </a>
   </div>
   <div>
      <a href="#" class="block-promo home-main">
         <img src="" data-lazy="https://via.placeholder.com/150"/>
      </a>
   </div>
</div>


<script>

      $('.demo').slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       dots:false,
       lazyLoad: 'ondemand',
       autoplay: true,
       autoplaySpeed: 5000,
       initialSlide: -1,
       infinite: true,
       arrows: true
       });   

</script>