flickity
Version:
Touch, responsive, flickable carousels
140 lines (119 loc) • 5.22 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>media</title>
<link rel="stylesheet" href="../css/flickity.css" />
<link rel="stylesheet" href="sandbox.css" />
<style>
.image-gallery img {
display: block;
margin-right: 20px;
max-height: 400px;
max-width: 100%;
}
#video-gallery1 .cell {
height: 300px;
width: auto;
}
.image-gallery-contained .image-cell {
width: 100%;
height: 300px;
background: black;
text-align: center;
}
.image-gallery-contained .image-cell a {
margin: 0 auto;
}
.image-gallery-contained .image-cell img {
height: 300px;
}
</style>
</head>
<body>
<h1>media</h1>
<div id="image-gallery1" class="container image-gallery"
data-flickity='{ "wrapAround": false, "imagesLoaded": true, "percentPosition": false }'>
<!-- images from unsplash.com -->
<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="image-gallery2" class="container image-gallery-contained"
data-flickity='{ "imagesLoaded": true, "percentPosition": false }'>
<!-- images from unsplash.com -->
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/r8p3Xgq.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/q9zO6tw.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/bwy74ok.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/hODreXI.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/UORFJ3w.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/bAZWoqx.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/PgmEBSB.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/aboaFoB.jpg" /></a>
</div>
<div class="image-cell">
<a href="https://example.com"><img src="https://i.imgur.com/LkmcILl.jpg" /></a>
</div>
</div>
<!-- <div id="video-gallery1" class="container video-gallery">
<div class="cell">
<iframe src="//player.vimeo.com/video/87701971" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/87701971">Yosemite HD II</a> from <a href="https://vimeo.com/projectyose">Project Yosemite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<div class="cell">
<iframe width="400" height="300" src="//www.youtube.com/embed/MvUE4WUtChk" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<iframe src="//player.vimeo.com/video/115014610" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/115014610">The Coast</a> from <a href="https://vimeo.com/nrsfilms">NRS Films</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<div class="cell">
<iframe width="400" height="300" src="//www.youtube.com/embed/TmQd6S9wXYQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cell">
<iframe src="//player.vimeo.com/video/115680769" width="712" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/115680769">Quids In</a> from <a href="https://vimeo.com/nbnumeric">New Balance Numeric</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
</div> -->
<!-- <div id="demo2" class="demo">
<div class="container variable-width"
data-flickity='{ "wrapAround": true, "freeScroll": true }'>
</div>
</div> -->
<script src="../node_modules/get-size/get-size.js"></script>
<script src="../node_modules/ev-emitter/ev-emitter.js"></script>
<script src="../node_modules/unidragger/unidragger.js"></script>
<script src="../node_modules/fizzy-ui-utils/utils.js"></script>
<script src="../node_modules/imagesloaded/imagesloaded.js"></script>
<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>
</body>
</html>