flickity
Version:
Touch, responsive, flickable carousels
345 lines (299 loc) • 11.1 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Flickity tests</title>
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css" />
<link rel="stylesheet" href="test.css" />
<link rel="stylesheet" href="../css/flickity.css" />
<script src="../node_modules/qunit/qunit/qunit.js"></script>
<!-- dependencies -->
<script src="../node_modules/get-size/get-size.js"></script>
<script src="../node_modules/ev-emitter/ev-emitter.js"></script>
<script src="../node_modules/fizzy-ui-utils/utils.js"></script>
<script src="../node_modules/unidragger/unidragger.js"></script>
<script src="../node_modules/imagesloaded/imagesloaded.js"></script>
<!-- Flickity source -->
<script src="../js/cell.js"></script>
<script src="../js/slide.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/core.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 src="../js/imagesloaded.js"></script>
<!-- unit tests -->
<script src="unit/init.js"></script>
<script src="unit/cell-selector.js"></script>
<script src="unit/empty.js"></script>
<script src="unit/get-parent-cell.js"></script>
<script src="unit/position-cells.js"></script>
<script src="unit/contain.js"></script>
<script src="unit/auto-play.js"></script>
<script src="unit/prev-next-buttons.js"></script>
<script src="unit/page-dots.js"></script>
<script src="unit/get-wrap-cells.js"></script>
<script src="unit/watch.js"></script>
<script src="unit/resize.js"></script>
<script src="unit/add-remove-cells.js"></script>
<script src="unit/destroy.js"></script>
<script src="unit/lazyload.js"></script>
<script src="unit/lazyload-srcset.js"></script>
<script src="unit/group-cells.js"></script>
<script src="unit/adaptive-height.js"></script>
<script src="unit/select-cell.js"></script>
<script src="unit/change.js"></script>
<script src="unit/initial-index.js"></script>
<script src="unit/wrap-around-fill.js"></script>
<script src="unit/imagesloaded.js"></script>
</head>
<body>
<div id="qunit"></div>
<h2>Init</h2>
<div id="init" class="gallery">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>cellSelector</h2>
<div id="cell-selector" class="gallery">
<p class="not-cell not-cell1">not cell 1</p>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<p class="not-cell not-cell2">not cell 2</p>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>empty</h2>
<div id="empty" class="gallery"></div>
<h2>getParentCell</h2>
<div id="get-parent-cell" class="gallery">
<div class="cell cell1"><span class="child1">1</span></div>
<div class="cell"><div><span class="child2">2</span></div></div>
<div class="cell cell3">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<div class="outside"></div>
<h2>position cells</h2>
<div id="position-cells" class="gallery variable-width">
<div class="cell width2">1</div>
<div class="cell">2</div>
<div class="cell width3">3</div>
<div class="cell width2">4</div>
<div class="cell width3">5</div>
<div class="cell">6</div>
</div>
<h2>contain</h2>
<div id="contain" class="gallery variable-width">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell width3">3</div>
<div class="cell width2">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>auto-play</h2>
<div id="auto-play" class="gallery">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<h2>prev/next buttons</h2>
<div id="prev-next-buttons" class="gallery">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>page dots</h2>
<div id="page-dots" class="gallery">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>getWrapCells</h2>
<div id="get-wrap-cells" class="gallery variable-width">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>watch</h2>
<div id="watch" class="gallery">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>resize</h2>
<div id="resize" class="gallery">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>add/remove-cells</h2>
<div id="add-remove-cells" class="gallery variable-width">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>destroy</h2>
<div id="destroy" class="gallery">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
<h2>lazyload</h2>
<div id="lazyload" class="gallery">
<div class="cell"><img data-flickity-lazyload="https://i.imgur.com/r8p3Xgq.jpg" /></div>
<img class="img-cell" data-flickity-lazyload="https://i.imgur.com/q9zO6tw.jpg" />
<div class="cell"><img data-flickity-lazyload="https://i.imgur.com/bwy74ok.jpg" /></div>
<div class="cell"><img data-flickity-lazyload="https://i.imgur.com/hODreXI.jpg" /></div>
<div class="cell"><img data-flickity-lazyload="https://i.imgur.com/UORFJ3w.jpg" /></div>
<div class="cell"><img data-flickity-lazyload="https://i.imgur.com/bAZWoqx.jpg" /></div>
<div class="cell"><img data-flickity-lazyload="https://i.imgur.com/PgmEBSB.jpg" /></div>
<img class="img-cell" data-flickity-lazyload="https://i.imgur.com/aboaFoB.jpg" />
<div class="cell"><img data-flickity-lazyload="https://i.imgur.com/LkmcILl.jpg" /></div>
</div>
<h2>lazyload srcset</h2>
<div id="lazyload-srcset" class="gallery">
<div class="cell">
<img 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" />
</div>
<img class="img-cell"
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 class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<h2>groupCells</h2>
<div id="group-cells" class="gallery">
<div class="cell"></div>
<div class="cell cell--width2"></div>
<div class="cell"></div>
<div class="cell cell--width3"></div>
<div class="cell"></div>
<div class="cell cell--width2"></div>
<div class="cell cell--width2"></div>
<div class="cell cell--width2"></div>
<div class="cell cell--width4"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell cell--width2"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<h2>adaptiveHeight</h2>
<div id="adaptive-height" class="gallery">
<div class="cell cell--height2"></div>
<div class="cell"></div>
<div class="cell cell--height3"></div>
<div class="cell"></div>
<div class="cell cell--height4"></div>
<div class="cell cell--height2"></div>
<div class="cell"></div>
<div class="cell cell--height2"></div>
</div>
<h2>selectCell</h2>
<div id="select-cell" class="gallery">
<div class="cell select-cell__0">0</div>
<div class="cell select-cell__1">1</div>
<div class="cell select-cell__2">2</div>
<div class="cell select-cell__3">3</div>
<div class="cell select-cell__4">4</div>
<div class="cell select-cell__5">5</div>
<div class="cell select-cell__6">6</div>
<div class="cell select-cell__7">7</div>
</div>
<h2>change</h2>
<div id="change" class="gallery">
<div class="cell">0</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</div>
<h2>initialIndex</h2>
<div id="initial-index" class="gallery variable-width">
<div class="cell">0</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell cell--initial">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
</div>
<h2>wrapAround: fill</h2>
<div id="wrap-around-fill" class="gallery variable-width">
<div class="cell">0</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell cell--wrap-around-short">4</div>
</div>
<h2>imagesLoaded</h2>
<div id="imagesloaded" class="gallery gallery--imagesloaded">
<img src="https://i.imgur.com/r8p3Xgq.jpg" />
<img src="https://i.imgur.com/q9zO6tw.jpg" />
<img src="https://i.imgur.com/bwy74ok.jpg" />
<img src="https://i.imgur.com/hODreXI.jpg" />
<img src="https://i.imgur.com/UORFJ3w.jpg" />
<img src="https://i.imgur.com/bAZWoqx.jpg" />
<img src="https://i.imgur.com/PgmEBSB.jpg" />
<img src="https://i.imgur.com/aboaFoB.jpg" />
<img src="https://i.imgur.com/LkmcILl.jpg" />
</div>
<div id="imagesloaded-in-divs" class="gallery gallery--imagesloaded">
<div><img src="https://i.imgur.com/r8p3Xgq.jpg" /></div>
<div><img src="https://i.imgur.com/q9zO6tw.jpg" /></div>
<div><img src="https://i.imgur.com/bwy74ok.jpg" /></div>
<div><div><img src="https://i.imgur.com/hODreXI.jpg" /></div></div>
<div><div><img src="https://i.imgur.com/UORFJ3w.jpg" /></div></div>
<div><img src="https://i.imgur.com/bAZWoqx.jpg" /></div>
<div><img src="https://i.imgur.com/PgmEBSB.jpg" /></div>
<div><div><img src="https://i.imgur.com/aboaFoB.jpg" /></div></div>
<div><img src="https://i.imgur.com/LkmcILl.jpg" /></div>
</div>
</body>
</html>