Small Auto-scrolling Carousel Plugin with jQuery - yac.js
File Size: | 4.98 KB |
---|---|
Views Total: | 2432 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.