Responsive Auto-fading Background Slideshow with jQuery - FadeShow

FadeShow is a jQuery plugin for creating a responsive full page background image slideshow with CSS3 based crossfade transitions. The slideshow automatically scales images to fill their parent container while maintaining aspect ratio and maintaining centering.

How to use it:

1. Load the jQuery FadeShow plugin's CSS file in the head section.

<link rel="stylesheet" href="css/jquery.fadeshow-0.1.min.css">

2. Load the jQuery FadeShow plugin's JS file at the bottom of the web page but after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="src/jquery.fadeshow-0.1.min.js"></script>

3. Create a container for the background slideshow.

<div class="background"></div>

4. Call the plugin on the container and add your background images using images array.

$(".background").fadeShow({

// the aspect fill will be intact even when resizing the window
//only handy for full width / height slideshows, otherwise slows your page down
correctRatio: true,

// the slides will be shuffled before shown, get a unique slider each refresh
shuffle: true,

// milliseconds per slide
speed: 10000,

// images (urls) to create the slideshow with, array of strings
images: ['1.jpg', '2.jpg','3.jpg']

});

Change log:

2016-08-26

• Updated to work with multiple instances

v0.1.1 (2015-02-05)

• Added underscore.js detection for debounce

---

This awesome jQuery plugin is developed by terwanerik. For more Advanced Usages, please check the demo page or visit the official website.