Responsive 4-Section Window Slider Plugin For jQuery
File Size: | 4.04 KB |
---|---|
Views Total: | 1988 |
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:
<div id="example" class="window-slider"> <!-- TOP LEFT SLIDER --> <div class="tl-window"> <img src="https://source.unsplash.com/400x250/?nature"> <img src="https://source.unsplash.com/400x250/?fitness"> </div> <!-- TOP RIGHT SLIDER --> <div class="tr-window"> <img src="https://source.unsplash.com/400x250/?people"> <img src="https://source.unsplash.com/400x250/?beauty"> </div> <!-- BOTTOM LEFT SLIDER --> <div class="bl-window"> <img src="https://source.unsplash.com/400x250/?water"> <img src="https://source.unsplash.com/400x250/?girl"> </div> <!-- BOTTOM RIGHT SLIDER --> <div class="br-window"> <img src="https://source.unsplash.com/400x250/?future"> <img src="https://source.unsplash.com/400x250/?game"> </div> </div>
2. Add jQuery library and the Window Slider's files to the webpage.
<link rel="stylesheet" href="window.slider.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="window.slider.js"></script>
3. Enable the window slider and we're done.
$(document).ready(function() { $('#example').windowSlider(); });
4. Set the start position (1-4).
$('#example').windowSlider({ startPosition: 1 });
5. Set the autoplay interval.
$('#example').windowSlider({ interval: 3000 });
6. Set the duration of the fade animation.
$('#example').windowSlider({ fadeOutSpeed: 400, fadeInSpeed: 1500 });
7. Set the switching sequence of images. Possible values: standard', 'reverse', 'clockwise', 'counter-clockwise'.
$('#example').windowSlider({ cycle: 'standard' });
Changelog:
2023-01-27
- minor clean up
This awesome jQuery plugin is developed by ajavadi34. For more Advanced Usages, please check the demo page or visit the official website.