Adaptive Responsive jQuery Image Slider Plugin - jSlider

jSlider is a tiny and easy-to-use jQuery slider / carousel plugin used to present your images in a responsive, automatic slider box with arrows navigation and dots pagination. 

How to use it:

1. Load jQuery library together with the jQuery jSlider plugin's CSS and JS files in the html page.

<link rel="stylesheet" href="css/jSlider.css">
  ...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jSlider.js"></script>

2. Add a list of images and the slider controls into the slider box. The slider box must be the same size as image inside. By default it is 100% width and height of parent container. The plugin will preload first image to find it size and set the size of the slider box.

<div id="mySlider">
  <ul class="slider-box">
    <li class="slider-item"><img src="img/1.jpg"></li>
    <li class="slider-item"><img src="img/2.jpg"></li>
    <li class="slider-item"><img src="img/3.jpg"></li>

    <!--Control buttons (left and right)-->
    <a class="slider-left" role="button"></a>
    <a class="slider-right" role="button"></a>

    <ul class="slider-pointers">
    </ul>
  </ul>
</div>

3. Initialize the image slider by call the function on the parent container.

$("#mySlider").jSlider();

4. The default values of sliding speed and delay of slides changing. You can set new values if it was specified on plugin call.

$("#mySlider").jSlider({
  slidingTime: 500,
  rotateDelay: 2000
});

---

This awesome jQuery plugin is developed by yuittti. For more Advanced Usages, please check the demo page or visit the official website.