Responsive 4-Section Window Slider Plugin For jQuery

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.