Small Auto-scrolling Carousel Plugin with jQuery - yac.js

yac.js (yet another carousel) jQuery plugin allows you to create a non-stop image carousel with bottom slide indicators.

How to use it:

1. Insert a group of images into the carousel following the html structure like this:

<div class="yac">
  <div class="yac-inner">
    <div class="active"><img src="1.png" alt=""></div>
    <div><img src="2.png" alt=""></div>
    <div><img src="3.png" alt=""></div>
  </div>
</div>

2. Include jQuery library and the jQuery yac.js plugin at the bottom of the web page.

<script src="jquery-1.11.3.min.js"></script>
<script src="yac.js"></script>

3. Basic CSS styles for the carousel.

.yac {
  width: 1000px;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.yac-inner div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.yac-inner .active { z-index: 1; }

4. Style the slide indicators.

.yac-indicators {
  position: absolute;
  padding: 0;
  bottom: 0px;
  width: 100%;
  text-align: center;
  z-index: 100;
}

.yac-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 10px;
  margin: 2px;
  cursor: pointer;
}

.yac-indicators li.active { background-color: #fff; }

5. Initialize the carousel and setup the transition speed you prefer.

Yac(2000); // default: 5000ms

---

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