A Minimal Carousel Javascript Library

Preview:

Description:

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">
<ul>
<li>First impressive message!</li>
<li>Second message with all the magic.</li>
<li>Also, you can configure minimal carousel as you want.</li>
</ul>
</div>

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

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();
</script>

Style the carousel as per your needs.

<style>
.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;
}
</style>