Minimal Automatic Image Carousel Plugin For jQuery

A simplest jQuery carousel plugin that provides a possible to rotate through a list of images with slide or fade transition effects.

How to use it:

1. Add a list of images with arrows navigation and bullets pagination to your web page.

<div class="carousel-container">
  <div>
    <span class="circle-button prev"><</span>
    <span class="circle-button next">></span>
  </div>
  <div class="content-container">
    <ul class="content clearfix">
      <li data-index=0><a href="#"><img src="1.jpg" alt=""></a></li>
      <li data-index=1><a href="#"><img src="2.png" alt=""></a></li>
      <li data-index=2><a href="#"><img src="3.png" alt=""></a></li>
      <li data-index=3><a href="#"><img src="4.png" alt=""></a></li>
      <li data-index=4><a href="#"><img src="5.png" alt=""></a></li>
    </ul>
  </div>
  <ul class="quick-nav clearfix">
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
    <li><a href="javascript:void(0)"></a></li>
  </ul>
</div>

2. The primary CSS styles.

* {
  padding: 0;
  margin: 0;
}

.clearfix {
  overflow: hidden;
  _zoom: 1;
}

.carousel-container {
  width: 500px;
  margin: 30px auto;
  position: relative;
}

.carousel-container li {
  float: left;
  list-style: none;
}

.content-container {
  width: 500px;
  height: 250px;
  overflow: hidden;
}

.carousel-container .content {
  position: absolute;
  left: 0;
}

.carousel-container .content img {
  width: 500px;
  height: 250px;
}

3. Style the carousel controls.

.carousel-container .quick-nav a {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e5e5e5;
  opacity: .5;
  margin: 4px 5px;
}

.carousel-container .quick-nav a.active { background: rgba(0,0,0,.8); }

.carousel-container .quick-nav {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,.5);
  border-radius: 4px;
}

.carousel-container .circle-button {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  line-height: 32px;
  text-align: center;
}

.carousel-container .prev, .carousel-container .next {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  z-index: 100;
}

.carousel-container .prev { left: 10px; }

.carousel-container .next {
  right: 10px;
  left: auto;
}

4. Import jQuery library and the jQuery.carousel.js into the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jQuery.carousel.js"></script> 

5. Initialize the image carousel with default settings.

$('.carousel-container').carousel();

6. Default plugin settings.

// class names for carousel & carousel controls
nextNavClassName: "next", //'next' 
prevNavClassName: "prev", //'prev' 
quickNavClassName: "quick-nav",
contentClassName: "content", 
activeClassName: 'active', 

// data- attribute name
indexName: 'data-index',

// enable autoplay
autoplay: true,

// transition delay
duration: 1000,

// autoplay interval
interval: 3000, 

// slide or fade
effect: 'slide'

---

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