<h1>Flickity - lazyLoad</h1>
<div class="carousel"
data-flickity='{ "lazyLoad": true }'>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/tulip.jpg" alt="tulip" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/grapes.jpg" alt="grapes" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/raspberries.jpg" alt="raspberries" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/wolf.jpg" alt="wolf" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/shore.jpg" alt="sea" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/leaf-droplets.jpg" alt="leaf droplets" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/gulls.jpg" alt="gulls" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/touch-screen.jpg" alt="touch screen" />
</div>
<div class="carousel-cell">
<img class="carousel-cell-image"
data-flickity-lazyload="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/van.jpg" alt="van" />
</div>
</div>
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
.carousel-cell {
width: 66%;
height: 400px;
margin-right: 10px;
background: #333;
}
.carousel-cell-image {
display: block;
max-height: 100%;
margin: 0 auto;
max-width: 100%;
opacity: 0;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
/* fade in lazy loaded image */
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
opacity: 1;
}