This time I will share jQuery Plugin and tutorial about Responsive Multi-slide Scroller Plugin For jQuery – ifs-slider, hope it will help you in programming stack.
| File Size: | 6.74 KB |
|---|---|
| Views Total: | 1525 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
1 |
<link rel="stylesheet" href="slider.style.css"> |
2. Add your own slide items (images, text, divs, etc) to the scroller.
01 |
<ul id="example"> |
02 |
<li class="slide"> |
03 |
Slide 1 |
04 |
</li> |
05 |
<li class="slide"> |
06 |
Slide 2 |
07 |
</li> |
08 |
<li class="slide"> |
09 |
Slide 3 |
10 |
</li> |
11 |
<li class="slide"> |
12 |
Slide 4 |
13 |
</li> |
14 |
<li class="slide"> |
15 |
Slide 5 |
16 |
</li> |
17 |
<li class="slide"> |
18 |
Slide 6 |
19 |
</li> |
20 |
<li class="slide"> |
21 |
Slide 7 |
22 |
</li> |
23 |
<li class="slide"> |
24 |
Slide 8 |
25 |
</li> |
26 |
... |
27 |
</ul> |
3. Include jQuery library and the jQuery ifs-slider plugin’s script at the bottom of the webpage.
1 |
<script |
3 |
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" |
4 |
crossorigin="anonymous"> |
5 |
<script type="text/javascript" src="ifs.js"></script> |
4. Activate the scrolling by calling the function on the html list.
1 |
$('#example').ifs<a href="https://www.jqueryscript.net/slider/">Slider</a>(); |
5. To config the scroller, just by passing the following options to the ifsSlider() function on init.
01 |
$('#example').ifsSlider({ |
02 |
items: 4, |
03 |
speed: 400, |
04 |
loop: true, |
05 |
interval: 2000, |
06 |
autoWidth: false, |
07 |
className: '', |
08 |
rtl: true, |
09 |
ltr: false, |
10 |
margin: 10, |
11 |
auto: false, |
12 |
beforeInit: function(){} |
13 |
}); |
This awesome jQuery plugin is developed by kailashyogeshwar85. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
