Basic Responsive Vanilla JavaScript Carousel Plugin – Vanilla Carousel

Category: Javascript , Slider | February 10, 2016
Views Total:2,132 views
Official Page:Go to website
Last Update:February 10, 2016


Basic Responsive Vanilla JavaScript Carousel Plugin – Vanilla Carousel


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>

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 () {
document.getElementById('next').addEventListener('click', function () {;

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


You Might Be Interested In:

Leave a Reply