Automatic Cross-fading Carousel Plugin For jQuery - autoSlider
File Size: | 14.5 KB |
---|---|
Views Total: | 1990 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

autoSlider is a lightweight, responsive jQuery slideshow plugin that converts a list of images/text into an automatic slider/carousel with a crossfade transition effect.
How to use it:
1. Create the html for a banner rotator using the jQuery autoSlider plugin.
<div id="banner" class="banner"> <ul> <li> <img src="1.jpg" alt=""> <p>Slide 1</p> </li> <li> <img src="2.jpg" alt=""> <p>Slide 2</p> </li> <li> <img src="3.jpg" alt=""> <p>Slide 3</p> </li> </ul> </div>
2. Load jQuery library and the jQuery autoSlider plugin at the bottom of the web page.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/jQuery.autoSlider.js"></script>
3. Call the plugin on the parent container.
$(function(){ $('.banner').autoSlider({ // options }); });
4. Add the required styles to the banner rotator.
.banner { position: relative; margin: 0 auto; max-width:720px; } .banner ul, ol { padding: 0; margin: 0 } .banner li { width: 100%; list-style: none } .banner li p { position: absolute; margin: 0; padding: 0; left: 0; top: 50%; text-align: center; font-size: 28px; height: 38px; color: #fff; margin-top: -19px } .banner li a { text-decoration: none; color: #fff } #banner ol { width: 42px; position: absolute; left: 50%; bottom: 10px; z-index: 1000; margin-left: -21px; overflow: hidden } #banner ol li { float: left; background-color: #fff; color: #000; margin: 2px; width: 10px; height: 10px; display: block; text-align: center; cursor: pointer; border-radius: 50%; font-size: 14px; text-indent: -999em; list-style: none } #banner ol li.active { background-color: orange; color: #fff }
5. The default options.
$(function(){ $('.banner').autoSlider({ // animation speed speed: 500, // transition delay delay: 3000, // display navigation bullets dots: false, // mouse hover to pause the auto slider stay: false, // enable fluid layout fluid: false }); });
This awesome jQuery plugin is developed by zhengbowei. For more Advanced Usages, please check the demo page or visit the official website.