Fullscreen Responsive Image Slider Plugin For jQuery - JiSlider

Just another jQuery & CSS3 based image slider plugin to generate a responsive, fullscreen carousel from a list of images.

How to use it:

1. Load the jQuery JiSlider plugin's stylesheet file for basic slider styles.

<link rel="stylesheet" href="JiSlider.css">

2. Add a list of images to the slider.

<div id="JiSlider" class="jislider">
  <ul>
    <li>
      <img src="1.jpg">
    </li>
    <li>
      <img src="2.jpg">
    </li>
    <li>
      <img src="3.jpg">
    </li>
  </ul>
</div>

3. Make the image slider fullscreen.

#JiSlider {
  width: 100%;
  height: 100%;
}

4. Load jQuery library and the jQuery JiSlider plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="JiSlider.js"></script>

5. Initialize the image slider.

$('#JiSlider').JiSlider(/*OPTIONS*/)

6. Initialize the image slider.

// autoplay
auto: true,

// initial image
start: 1,

// animation speed
time: 600,

// transition delay
stay: 3000,

// display slider controls
controller: true,

// easing method
easing: 'ease',

// text color
color: '#fff',

// reverse direction
reverse: false,

---

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