jQuery 4 Section Window Slider Plugin – window.slider.js

jquery-window-slider-plugin

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.
jquery-window-slider-plugin

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top