Adaptive Responsive jQuery Image Slider Plugin - jSlider

File Size: 9.3 KB
Views Total: 1991
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">

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


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

  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.