flickity
Version:
Touch, responsive, flickable carousels
240 lines (216 loc) • 9.64 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>lazyload</title>
<link rel="stylesheet" href="../css/flickity.css" />
<style>
* { box-sizing: border-box; }
.carousel {
border: 1px solid;
margin-bottom: 40px;
}
.carousel__image {
display: block;
margin-right: 20px;
height: 400px;
max-width: 100%;
min-width: 200px;
background: #DDD;
transition: opacity 0.8s;
opacity: 0;
}
.carousel__image.flickity-lazyloaded {
opacity: 1;
}
.carousel__cell {
width: 80%;
height: 400px;
margin-right: 20px;
background: #DDD;
}
.carousel__cell__image {
display: block;
max-width: 100%;
max-height: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>lazyload</h1>
<div class="carousel js-flickity" data-flickity-options='{ "lazyLoad": true }'>
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
</div>
<div class="carousel js-flickity"
data-flickity-options='{ "lazyLoad": 1, "wrapAround": true }'>
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
</div>
<div class="carousel js-flickity"
data-flickity-options='{ "lazyLoad": true }'>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" /></div>
<div class="carousel__cell">
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
</div>
<div class="carousel carousel--jq">
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
<img class="carousel__image" data-flickity-lazyload="foo.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
</div>
<h2>srcset</h2>
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
<img class="carousel__image"
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=718"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=718 720w,
https://picsum.photos/360/270/?image=718 360w"
sizes="(min-width: 1024px) 720px, 360px"
/>
<img class="carousel__image"
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=517"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=517 720w,
https://picsum.photos/360/270/?image=517 360w"
sizes="(min-width: 1024px) 720px, 360px"
/>
<img class="carousel__image"
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=696"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=696 720w,
https://picsum.photos/360/270/?image=696 360w"
sizes="(min-width: 1024px) 720px, 360px"
/>
<img class="carousel__image"
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=56"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=56 720w,
https://picsum.photos/360/270/?image=56 360w"
sizes="(min-width: 1024px) 720px, 360px"
/>
<img class="carousel__image"
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1084"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=1084 720w,
https://picsum.photos/360/270/?image=1084 360w"
sizes="(min-width: 1024px) 720px, 360px"
/>
<img class="carousel__image"
data-flickity-lazyload-src="https://picsum.photos/360/270/?image=1080"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=1080 720w,
https://picsum.photos/360/270/?image=1080 360w"
sizes="(min-width: 1024px) 720px, 360px"
/>
</div>
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
<div class="carousel__cell">
<img class="carousel__cell__image"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=718 720w,
https://picsum.photos/360/270/?image=718 360w"
sizes="(min-width: 1024px) 720px, 360px" />
</div>
<div class="carousel__cell">
<img class="carousel__cell__image"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=517 720w,
https://picsum.photos/360/270/?image=517 360w"
sizes="(min-width: 1024px) 720px, 360px" />
</div>
<div class="carousel__cell">
<img class="carousel__cell__image"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=696 720w,
https://picsum.photos/360/270/?image=696 360w"
sizes="(min-width: 1024px) 720px, 360px" />
</div>
<div class="carousel__cell">
<img class="carousel__cell__image"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=56 720w,
https://picsum.photos/360/270/?image=56 360w"
sizes="(min-width: 1024px) 720px, 360px" />
</div>
<div class="carousel__cell">
<img class="carousel__cell__image"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=1084 720w,
https://picsum.photos/360/270/?image=1084 360w"
sizes="(min-width: 1024px) 720px, 360px" />
</div>
<div class="carousel__cell">
<img class="carousel__cell__image"
data-flickity-lazyload-srcset="
https://picsum.photos/720/540/?image=1080 720w,
https://picsum.photos/360/270/?image=1080 360w"
sizes="(min-width: 1024px) 720px, 360px" />
</div>
</div>
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<!-- dependencies -->
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/unipointer/unipointer.js"></script>
<script src="../bower_components/unidragger/unidragger.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<!-- Flickity -->
<script src="../js/cell.js"></script>
<script src="../js/slide.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/flickity.js"></script>
<script src="../js/drag.js"></script>
<script src="../js/prev-next-button.js"></script>
<script src="../js/page-dots.js"></script>
<script src="../js/player.js"></script>
<script src="../js/add-remove-cell.js"></script>
<script src="../js/lazyload.js"></script>
<script>
var $jQCarousel = $('.carousel--jq').flickity({
lazyLoad: true
});
$jQCarousel.on( 'lazyLoad', function( event, cellElem ) {
});
</script>
</body>
</html>