This time I will share jQuery Plugin and tutorial about Automatic Image Rotator / Carousel Plugin with jQuery, hope it will help you in programming stack.
Yet another jQuery image carousel plugin which automatically rotate through any number of images at a given interval.
How to use it:
1. Insert a list of images together with next/prev navigation buttons into the document.
1 |
<div class="caroursel rotator-demo"> |
2 |
<ul class="rotator-list"> |
3 |
<li class="rotator-item"><img src="image/1.jpg"></li> |
4 |
<li class="rotator-item"><img src="image/2.jpg"></li> |
5 |
<li class="rotator-item"><img src="image/3.jpg"></li> |
7 |
<div class="rotator-btn rotator-prev-btn"></div> |
8 |
<div class="rotator-btn rotator-next-btn"></div> |
2. Add jQuery library and the jQuery carousel.js plugin to the web page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="js/jquery.carousel.js"></script> |
3. Initialize the carousel and we’re ready to go.
1 |
Caroursel.init($('.caroursel')) |
4. Style the image carousel with you own CSS styles.
07 |
.rotator-main a, .rotator-main img { display: block; } |
09 |
.rotator-main .rotator-list { |
14 |
.rotator-main .rotator-list .rotator-item { |
20 |
.rotator-main .rotator-btn { |
29 |
.rotator-main .rotator-prev-btn { |
31 |
background: url("../image/btn_l.png") no-repeat center center; |
35 |
.rotator-main .rotator-next-btn { |
37 |
background: url("../image/btn_r.png") no-repeat center center; |
5. You can pass the options to the carousel plugin using data-setting attribute on the top container.
1 |
<div class="caroursel rotator-main" |
This awesome jQuery plugin is developed by JANGFREEMAN. For more Advanced Usages, please check the demo page or visit the official website.
