Minimal Content Carousel with Pure JavaScript

Category: Javascript , Slideshow | December 19, 2015
Author:wecodeio
Views Total:1,889 views
Official Page:Go to website
Last Update:December 19, 2015
License:MIT

Preview:

Minimal Content Carousel with Pure JavaScript

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

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…

    Reply

Leave a Reply