Basic Responsive Vanilla JavaScript Carousel Plugin – Vanilla Carousel

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
    
});