Flexible jQuery Image Slider/Scroller Plugin - xuSliders

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:

• Fixed width
• Full width

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.