Minimal Content Carousel with Pure JavaScript

Preview:

Description:

minimal carousel is a dependency-free JavaScript library that takes a list of html elements and converts them into a basic carousel with auto rotation.

Basic usage:

Link to minimal-carousel.js.

<script src="minimal-carousel.js"></script>

Add a list of html content for the carousel.

<div class="carousel">
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
  </ul>
</div>

Add control buttons to the webpage.

<div class="button-set">
  <button onclick="myCarousel.prev();">prev()</button>
  <button onclick="myCarousel.stop();">stop()</button>
  <button onclick="myCarousel.play();">play()</button>
  <button onclick="myCarousel.next();">next()</button>
</div>

Initialize the carousel.

var myCarousel = new Carousel();

Configuration options.

new Carousel({
    carousel: '.carousel',
    delay: 2.5,
    autoplay: true
})