ken-burns-slideshow
Version:
A slideshow in JS with the Ken Burns effect
34 lines (33 loc) • 1.01 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<title>SlideShow</title>
</head>
<body>
<ul class="slideshow">
<li>
<img src="https://drscdn.500px.org/photo/107582355/m%3D2048/07404614ba0aa15daa6c245afcaed99e">
</li>
<li>
<img src="https://drscdn.500px.org/photo/101763621/m%3D2048/9cf690c44298419c72a1f95c3f673be8">
</li>
<li>
<img src="https://drscdn.500px.org/photo/100456891/m%3D2048/8d6ea72a3a45f807cbebb8484cb967d6">
</li>
<li>
<img src="https://drscdn.500px.org/photo/94603315/m%3D2048/5335cd42cd5000d28903b64b7281aebe">
</li>
<li>
<img src="https://drscdn.500px.org/photo/93466823/m%3D2048/dba5ed23027fc43ea504605a954506e7">
</li>
</ul>
<script src="ken-burns-slideshow.global.min.js"></script>
<script>
var slideshow = new KenBurnsSlideshow({
el: document.querySelector('.slideshow')
})
slideshow.init()
</script>
</body>
</html>