Justified Image Grid Slideshow using jQuery

The plugin, “window-slider” is a lite, clean and easy to use plugin for jQuery. It helps you to create justified image grid slideshow with fading effect. You just need to place your images in HTML then this plugin switch these images in a sequance.

Moreover, you can slide images in three different (reverse, clockwise, and counter-clockwise) order. Likewise, you can also customize interval, fade in, and fade out speed.

Plugin Overview and Preview

Plugin: window-slider
Author: AJ
Category: Carousel
Published: 9 months ago
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 7 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
2,152

How to Create Justified Image Grid Slideshow

1. To getting started with “window-slider”, load the jQuery by adding CDN link into your web project.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. In second step, include plugin’s CSS and Js file in your website/app.

<!-- window-slider CSS -->
<link rel="stylesheet" href="css/window.slider.css">
<!-- window-slider JS -->
<script src="js/window.slider.js"></script>

3. Create HTML div element wit class name “window-slider” and place your images inside it:

      <div id="slider-1" class="window-slider">
          <!-- TOP LEFT SLIDER -->
          <div class="tl-window">
            <img src="https://placeimg.com/400/250/tech/sepia">
            <img src="https://placeimg.com/400/250/tech">
          </div>
          
          <!-- TOP RIGHT SLIDER -->
          <div class="tr-window">
            <img src="https://placeimg.com/400/250/nature/grayscale">
            <img src="https://placeimg.com/400/250/nature">
          </div>
          
          <!-- BOTTOM LEFT SLIDER -->
          <div class="bl-window">
            <img src="https://placeimg.com/400/250/arch">
            <img src="https://placeimg.com/400/250/arch/sepia">
          </div>
          
          <!-- BOTTOM RIGHT SLIDER -->
          <div class="br-window">
            <img src="https://placeimg.com/400/250/animals">
            <img src="https://placeimg.com/400/250/animals/grayscale">
          </div>
      </div>

4. When all was done, initialize the plugin in jQuery document ready function to active the window-slider.

$(document).ready(function(){
	$('#slider-1').windowSlider();
});

Advance Configuration Options

The following are some advanced configuration options to create / customize Justified Image Grid Slideshow.

Option Default Type Description
startPosition 1 Number This option specifies the start position.

Example:

$('#slider-1').windowSlider({
	startPosition : 1,
}); 
interval 3000 Number The interval before switching to the next image.

Example:

$('#slider-1').windowSlider({
	interval : 3000,
}); 
fadeOutSpeed 400 Number It define the fadeout speed.

Example:

$('#slider-1').windowSlider({
	fadeOutSpeed : 400,
}); 
fadeInSpeed 1500 Number It define the fade in speed in milliseconds.

Example:

$('#slider-1').windowSlider({
	fadeInSpeed : 1500,
}); 
cycle ‘standard’ String This option specifies the sliding cycle of images. Possible options are: ‘standard’ / ‘reverse’ / ‘clockwise’ / ‘counter-clockwise’

Example:

$('#slider-1').windowSlider({
	cycle : 'standard',
}); 

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.