jQuery Plugin To Control The List Of Elements In Horizontal Order

jQuery carousel plugin that provides the ability to rotate through the image list with slide transition or fade effects.

Must Read: Create a Horizontal Timeline Using jQuery plugin | timeline.js

How to make use of it:

1. Add a list of images with arrow navigation and split bulleted numbering 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. Basic 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. The style of 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 the jQuery library and 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. Configure the circle of images using the 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'