title: Lazy loading wont work for responsive images in slick carousel
body: <p>I have problem with lazy loading images in <code>slick carousel</code>. When I use devices that have screens below 980px, everything works as it should (load smaller images on demand). But when I am on screens with resolution greater than 980px it load all big images, than on demand load small image one at time.</p>
  
  <p><strong>.cshtml file</strong></p>
  
  <pre><code>@{
      Javascript.Includes.Add("views/home/home-ads-carousel.js");
      Javascript.Code.Add("views.home.carousel.init();");
  }
  
          &lt;div class="ad_carousel"&gt;
              @foreach (var ad in homepageAds)
              {
                  &lt;div class="post__image-container"&gt;
                      &lt;picture&gt;
                          &lt;source media="(min-width: 980px)" srcset="@(Configuration.URLs.MediaPath + ad.ImagePath)" /&gt;
                          &lt;img class="post__featured-image" data-lazy="@(Configuration.URLs.MediaPath + ad.SmallImagePath)" /&gt;
                      &lt;/picture&gt;
                      &lt;div class="carousel_text"&gt;
                          &lt;h2&gt;@ad.Title&lt;/h2&gt;
                          &lt;p&gt;@ad.CallToActionText&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              }                           
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>.js file</strong> </p>
  
  <pre><code>(function($) {
      var carousel = {};
      carousel.init = function () {
          this.carouselHolder = $('.ad_carousel');
          this.carouselHolder.slick({
              autoplay: true,
              autoplaySpeed: 6000,
              arrows: true,
              infinite: true,
              initialSlide: 1,
              lazyLoad: 'ondemand',
              //fade: true
          });
      }
  
      views.home.carousel = carousel;
  
  })(jQuery);
  </code></pre>
  
  <p>thanks in advance. </p>