Simple Fast Image Carousel Plugin For jQuery - Roll.js

Roll.js is a simple, fast jQuery slider plugin which takes a group of images and converts them into a looping, automatic carousel with navigation arrows and pagination dots.

How to use it:

1. Create a list of images for the carousel.

<div class="container">
  <div id="list">
    <img src="5.jpg" alt="5">
    <img src="1.jpg" alt="1">
    <img src="2.jpg" alt="2">
    <img src="3.jpg" alt="3">
    <img src="4.jpg" alt="4">
    <img src="5.jpg" alt="5">
    <img src="1.jpg" alt="1">
  </div>
</div>

2. Add navigation and pagination controls to your carousel.

<div id="buttons">
  <span index="1" class="on"></span>
  <span index="2"></span>
  <span index="3"></span>
  <span index="4"></span>
  <span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow">&lt;</a>
<a href="javascript:;" id="next" class="arrow">&gt;</a>

3. Place jQuery library and the jQuery roll.js script at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/roll.js"></script>

4. The required CSS to style the carousel and its controls.

#list {
  width: 4200px;
  height: 450px;
  position: absolute;
  z-index: 1;
}

#list img { float: left; }

#buttons {
  position: absolute;
  height: 10px;
  width: 100px;
  z-index: 2;
  bottom: 20px;
  left: 250px;
}

#buttons span {
  cursor: pointer;
  float: left;
  border: 1px solid #fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  margin-right: 5px;
}

#buttons .on { background: orangered; }

.arrow {
  cursor: pointer;
  display: none;
  line-height: 39px;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  top: 180px;
  background-color: RGBA(0,0,0,.3);
  color: #fff;
}

.arrow:hover { background-color: RGBA(0,0,0,.7); }

#container:hover .arrow { display: block; }

#prev { left: 20px; }

#next { right: 20px; }

5. Override the default parameters.

var container = $('#container');
var list = $('#list');
var buttons = $('#buttons span');
var prev = $('#prev');
var next = $('#next');
var index = 1;
var len = 5;
var interval = 3000;
var timer;

---

This awesome jQuery plugin is developed by Joinwang. For more Advanced Usages, please check the demo page or visit the official website.