Responsive Multi-slide Scroller Plugin For jQuery - ifs-slider

ifs-slider is a lightweight slider jQuery plugin used to generate a responsive, horizontal, auto-sliding, multi-slide scroller from an HTML unordered list.

How to use it:

1. Include the jQuery ifs-slider plugin's stylesheet in the header of the webpage.

<link rel="stylesheet" href="slider.style.css">

2. Add your own slide items (images, text, divs, etc) to the scroller.

<ul id="example">
  <li class="slide">
    Slide 1            
  </li>        
  <li class="slide">
    Slide 2            
  </li>
  <li class="slide">
    Slide 3            
  </li> 
  <li class="slide">
    Slide 4            
  </li> 
  <li class="slide">
    Slide 5           
  </li>  
  <li class="slide">
    Slide 6            
  </li> 
  <li class="slide">
    Slide 7            
  </li>
  <li class="slide">
    Slide 8            
  </li> 
  ...
</ul>

3. Include jQuery library and the jQuery ifs-slider plugin's script at the bottom of the webpage.

<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"> 
<script type="text/javascript" src="ifs.js"></script> 

4. Activate the scrolling by calling the function on the html list.

$('#example').ifsSlider();

5. To config the scroller, just by passing the following options to the ifsSlider() function on init.

$('#example').ifsSlider({
  items: 4, 
  speed: 400, 
  loop: true,
  interval: 2000,
  autoWidth: false, 
  className: '',
  rtl: true, 
  ltr: false,
  margin: 10,
  auto: false,
  beforeInit: function(){}
});

---

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