This time I will share jQuery Plugin and tutorial about Small Auto-scrolling Carousel Plugin with jQuery – yac.js, hope it will help you in programming stack.
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:
2 |
<div class="yac-inner"> |
3 |
<div class="active"><img src="1.png" alt=""></div> |
4 |
<div><img src="2.png" alt=""></div> |
5 |
<div><img src="3.png" alt=""></div> |
2. Include jQuery library and the jQuery yac.js plugin at the bottom of the web page.
1 |
<script src="jquery-1.11.3.min.js"></script> |
2 |
<script src="yac.js"></script> |
3. Basic CSS styles for the carousel.
15 |
.yac-inner .active { z-index: 1; } |
4. Style the slide indicators.
11 |
display: inline-block; |
14 |
border: 2px solid #fff; |
20 |
.yac-indicators li.active { background-color: #fff; } |
5. Initialize the carousel and setup the transition speed you prefer.
This awesome jQuery plugin is developed by chrisktaylor. For more Advanced Usages, please check the demo page or visit the official website.
