Minimal Content Carousel with Pure JavaScript

Category: Javascript , Slideshow | December 19, 2015
Views Total:1,907 views
Official Page:Go to website
Last Update:December 19, 2015


Minimal Content Carousel with Pure JavaScript


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">
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>

Add control buttons to the webpage.

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

Initialize the carousel.

var myCarousel = new Carousel();

Configuration options.

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

You Might Be Interested In:

One thought on “Minimal Content Carousel with Pure JavaScript

  1. mouloud

    Great tool!
    But I cant get two carousels on the same page! If someone could help…


Leave a Reply