carousel-js
Version:
Easily implement a dynamic carousel using minimal javascript. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.
56 lines (48 loc) • 1.4 kB
HTML
<html>
<head>
<style>
.carousel-image {
width: 400px;
height: 200px;
display: none;
}
.carousel-image-active {
display: block;
margin-bottom: 5px;
}
.carousel-thumb {
width: 25px;
height: 25px;
background-color: red;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<p>
Click on one of the red squares below to interact with the photos.
</p>
<div class="carousel">
<img class="carousel-image" src="http://www.gstatic.com/webp/gallery/1.jpg" />
<img class="carousel-image" src="http://www.gstatic.com/webp/gallery/2.jpg" />
<img class="carousel-image" src="http://www.gstatic.com/webp/gallery/3.jpg" />
<div class="carousel-thumbs">
<div class="carousel-thumb"></div>
<div class="carousel-thumb"></div>
<div class="carousel-thumb"></div>
</div>
</div>
<script src="../dist/carousel.js"></script>
<script>
var thumbnails = document.getElementsByClassName('carousel-thumb');
var carousel = new Carousel({
panels: document.getElementsByClassName('carousel-image'),
thumbnails: thumbnails,
panelActiveClass: 'carousel-image-active'
});
// show second thumbnail on load
carousel.goTo(1);
</script>
</body>
</html>