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

by Posted on

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:

<div id="slider-1" class="window-slider">
    <!-- TOP LEFT SLIDER -->
    <div class="tl-window">
      <img src="pics/1.png">
      <img src="pics/2.jpg">
    </div>
 
    <!-- TOP RIGHT SLIDER -->
    <div class="tr-window">
      <img src="pics/3.jpg">
      <img src="pics/4.jpg">
    </div>
 
    <!-- BOTTOM LEFT SLIDER -->
    <div class="bl-window">
      <img src="pics/5.jpg">
      <img src="pics/6.jpg">
    </div>
 
    <!-- BOTTOM RIGHT SLIDER -->
    <div class="br-window">
      <img src="pics/7.png">
      <img src="pics/8.jpg">
    </div>
</div>



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.

DEMO | DOWNLOAD

This awesome plugin is developed by ajavadi34. Visit their official github repository for more information and follow for future updates.


Published by admin