Author: | mariusbuescher |
---|---|
Views Total: | 2,048 views |
Official Page: | Go to website |
Last Update: | February 10, 2016 |
License: | MIT |
Preview:

Description:
A vanilla JavaScript responsive carousel plugin which uses CSS3 animations to transition through a set of html elements.
How to use it:
Download and include both vanilla-carousel.basic.css and vanilla-carousel.js on the html page.
<link rel="stylesheet" href="src/vanilla-carousel.basic.css"> <script src="src/vanilla-carousel.js"></script>
Add carousel items into a container named ‘carousel’.
<div id="carousel" class="vanilla-carousel"> <div class="carousel-item">1</div> <div class="carousel-item">2</div> <div class="carousel-item">3</div> <div class="carousel-item">4</div> <div class="carousel-item">5</div> </div>
Initialize the carousel plugin as follows:
var carousel = new VanillaCarousel(document.getElementById('carousel'), { // options here });
Create prev / next buttons to navigate between carousel items.
<button id="prev">Prev</button> <button id="next">Next</button>
Active the navigation buttons.
document.getElementById('prev').addEventListener('click', function () { carousel.prev(); }); document.getElementById('next').addEventListener('click', function () { carousel.next(); });
Available carousel settings.
var carousel = new VanillaCarousel(document.getElementById('carousel'), { // css classes stageClass: 'vanilla-stage', itemClass: 'vanilla-item', noAnimationClass: 'vanilla-no-animation', // enable responsive responsive: true, // current item currentIte: 0, // infinie looping loop: false, // starting item start: 3 });