window.slider.js plugin is a 4 section window slider than alternates showing multiple images in each section while rotating images in sequence. The plugin based on window slider/slideshow which automatically fades through images in a responsive, mobile-friendly 4-section window.
Libraries
load following libraries on page.
<link rel="stylesheet" type="text/css" href="window.slider.css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">script> <script src="window.slider.js">script> |
HTML
Add images to the window slider as follows:
JS
$(document).ready(function() { $('#slider-1').windowSlider(); }); |
Here list of options you can use to customize the plugin.
// Override default settings $('#slider-1').windowSlider({ startPosition: 1, //startPosition 1 / 2 / 3 / 4 interval: 3000, // interval duration in milliseconds fadeOutSpeed: 400, // fadeOutSpeed duration in milliseconds fadeInSpeed: 1500, // fadeInSpeed duration in milliseconds cycle: 'standard' // cycle 'standard' / 'reverse' / 'clockwise' / 'counter-clockwise' }); |
See live demo and download source code.
This awesome plugin is developed by ajavadi34. Visit their official github repository for more information and follow for future updates.
