Skip to content

Instantly share code, notes, and snippets.

@avishai84
Last active December 4, 2017 21:21
Show Gist options
  • Select an option

  • Save avishai84/54121f098cdca79f963617986a0a14f7 to your computer and use it in GitHub Desktop.

Select an option

Save avishai84/54121f098cdca79f963617986a0a14f7 to your computer and use it in GitHub Desktop.
lazy-load-carousel
<div class="section-1" data-lazycallback="startCarousel">
<div class="sds_grid-root">
<div class="sds_g-1-1">
<div class="sds_relative">
<!-- Carousel -->
<div class="dp_main_carousel_mobile_desk">
<!-- slide1 -->
<div>
<picture>
<source media="(max-width: 767px)" data-srcset="/Asset_Archive/GPWeb/content/0014/543/595/assets/mobile/01_MOB_IMG.jpg">
<img data-src="/Asset_Archive/GPWeb/content/0014/543/595/assets/desktop/01_DESK_IMG.jpg" alt="our most loved styles">
</picture>
</div>
<!-- slide2 -->
<div>
<picture>
<source media="(max-width: 767px)" data-srcset="/Asset_Archive/GPWeb/content/0014/543/595/assets/mobile/01_MOB_IMG.jpg">
<img data-src="/Asset_Archive/GPWeb/content/0014/543/595/assets/desktop/01_DESK_IMG.jpg" alt="our most loved styles">
</picture>
</div>
</div>
<!-- End Carousel -->
</div>
</div>
</div>
</div>
<script>
//use data call back to lazy load carousel
var startCarousel = function(carouselClass) {
launchSlickCarousel('.dp_main_carousel_mobile_desk');
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment