This time I will share jQuery Plugin and tutorial about Responsive 4-Section Window Slider Plugin For jQuery, hope it will help you in programming stack.
| File Size: | 4.78 KB |
|---|---|
| Views Total: | 1399 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A jQuery based window slider/slideshow plugin which automatically fades through images in a responsive, mobile-friendly 4-section window.
How to use it:
1. Add images to the window slider as follows:
01 |
<div id="example" class="window-slider"> |
02 |
<!-- TOP LEFT SLIDER --> |
03 |
<div class="tl-window"> |
04 |
<img src="https://source.unsplash.com/400x250/?nature"> |
05 |
<img src="https://source.unsplash.com/400x250/?fitness"> |
06 |
</div> |
07 |
08 |
<!-- TOP RIGHT SLIDER --> |
09 |
<div class="tr-window"> |
10 |
<img src="https://source.unsplash.com/400x250/?people"> |
11 |
<img src="https://source.unsplash.com/400x250/?beauty"> |
12 |
</div> |
13 |
14 |
<!-- BOTTOM LEFT SLIDER --> |
15 |
<div class="bl-window"> |
16 |
<img src="https://source.unsplash.com/400x250/?water"> |
17 |
<img src="https://source.unsplash.com/400x250/?girl"> |
18 |
</div> |
19 |
20 |
<!-- BOTTOM RIGHT SLIDER --> |
21 |
<div class="br-window"> |
22 |
<img src="https://source.unsplash.com/400x250/?future"> |
23 |
<img src="https://source.unsplash.com/400x250/?game"> |
24 |
</div> |
25 |
</div> |
2. Add jQuery library and the Window Slider‘s files to the webpage.
1 |
<link rel="stylesheet" href="window.slider.css"> |
2 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" |
3 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
4 |
crossorigin="anonymous"></script> |
5 |
<script src="window.slider.js"></script> |
3. Enable the window slider and we’re done.
1 |
$(document).ready(function() { |
2 |
$('#example').windowSlider(); |
3 |
}); |
4. Set the start position (1-4).
1 |
$('#example').windowSlider({ |
2 |
startPosition: 1 |
3 |
}); |
5. Set the autoplay interval.
1 |
$('#example').windowSlider({ |
2 |
interval: 3000 |
3 |
}); |
6. Set the duration of the fade animation.
1 |
$('#example').windowSlider({ |
2 |
fadeOutSpeed: 400, |
3 |
fadeInSpeed: 1500 |
4 |
}); |
7. Set the switching sequence of images. Possible values: standard’, ‘reverse’, ‘clockwise’, ‘counter-clockwise’.
1 |
$('#example').windowSlider({ |
2 |
cycle: 'standard' |
3 |
}); |
This awesome jQuery plugin is developed by ajavadi34. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net
