A Minimal Carousel Javascript Library

Category: Javascript , Slider | January 12, 2014
Views Total:1,839 views
Official Page:Go to website
Last Update:January 12, 2014


A Minimal Carousel Javascript Library


A super tiny javascript library for creating a basic carousel/slider on your web page with infinite looping, auto play on loaded and support for any html elements.

Basic Usage:

Create a container for the carousel widget using Html unordered lists for the slidable items.

<div class="carousel">
<li>First impressive message!</li>
<li>Second message with all the magic.</li>
<li>Also, you can configure minimal carousel as you want.</li>

Create some buttons using built-in methods that allow to control the carousel out of the box.

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

Include minimal-carousel.js script at the end of the page.

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

The javascript.

<script type="text/javascript">
var myCarousel = new Carousel();

Style the carousel as per your needs.

.carousel {
width: 50%;
margin: 50px auto;
.carousel ul {
margin: 0;
padding: 0;
list-style-type: none;
.carousel ul li {
display: none;
font-family: sans;
font-style: 2em;
text-align: center;
.button-set {
text-align: center;

You Might Be Interested In:

Leave a Reply