FadeShow - A simple CSS3 slideshow

⚠️ Please note: this project is over 2 years old, and has not been tested with newer versions of jQuery.

It aspect-fills the images, so its perfect for backgrounds. You can set an option to preserve the aspect-fill while resizing.

Enjoy.

Demo

A live demo is available on Github Pages.

Usage

The plugin is really simple, add the jquery.fadeshow-[version].min.js to your project folder and include it.

<script src="src/jquery.fadeshow-0.1.1.min.js" type="text/javascript"></script>

Now add the CSS file and jquery.fadeshow-[version].min.css to your project and include it.

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

Place a container for the slideshow anywhere on your page, a div is preferred (it needs a width and height to show).

<div class="slideshow"></div>

Now call the .fadeShow() function on that element, you need to pass an array of image-urls. Do this after the page has finished loading.

$(function(){
  $(".slideshow").fadeShow({
    images: ['/img/one.jpg',
	         '/img/two.jpg',
	         '/img/three.jpg']
  });
});

Options

There are a number of options you can pass to the fadeShow, if you need a preview on how to do that, check the live demo.

Option Name	Type	Default	Description
images	Array of strings	null	All the images you want to display. - REQUIRED
speed	Integer	8000	The number of milliseconds to wait for the next slide to appear.
startAtSlide	Integer	0	The index of the image to start with.
correctRatio	Boolean	false	If true, the aspect-fill is kept intact while resizing the window. If false, the aspect-fill only works every time a new image appears.
shuffle	Boolean	false	If true, the input will be shuffled, generating a random order every time you refresh.

Underscore.js

If you have implemented Underscore.js on your page, it will automaticly use the debounce function while resizing. This makes it a bit snappier on older devices.

Known issues