Flexible jQuery Image Slider/Scroller Plugin - xuSliders
File Size: | 926 KB |
---|---|
Views Total: | 1692 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
xuSliders is jQuery plugin for creating a fixed width (or full width) image slider which allows you to infinitely loop through a set of images with basic navigation controls.
More examples:
How to use it:
1. Load the jQuery xuSliders plugin's stylesheet in the head of the webpage.
<link rel="stylesheet" href="css/slider.css">
2. Create a list of images for your slider.
<ul class="sliders"> <li><img src="0.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> </ul>
3. Create the Html for a next/prev arrows navigation.
<div class="direction-nav"> <a href="javascript:;" class="prev icon-circle-arrow-left icon-4x"><i>Previous</i></a> <a href="javascript:;" class="next icon-circle-arrow-right icon-4x"><i>Next</i></a> </div>
4. Create the Html for a bottom pagination.
<div class="control-nav"> <li data-id="1"><a href="javascript:;">1</a></li> <li data-id="2"><a href="javascript:;">2</a></li> <li data-id="3"><a href="javascript:;">3</a></li> <li data-id="4"><a href="javascript:;">4</a></li> <li data-id="5"><a href="javascript:;">5</a></li> </div>
5. Load jQuery library and the jQuery xusliders plugin's script at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.xuSlider.js"></script>
6. Call the function on the parent element to initialize the image slider.
$('.xuSlider').xuSlider();
7. Available options.
$('.xuSlider').xuSlider({ // shows navigation arrows controlNav: true, // shows pagination directionNav: true, // first slide startAt: 0, // auto slide delay animateTime: 700, // auto slide animation speed slideshowSpeed: 2000, // pause on hover pauseOnHover: true, // auto slide autoSlide: true });
This awesome jQuery plugin is developed by mackxu. For more Advanced Usages, please check the demo page or visit the official website.