Tiny Crossfading Image / Background Slideshow Plugin - imgCrossfade

imgCrossfade is a lightweight, responsive, cross-browser jQuery slideshow plugin which fades through a set of images or backgrounds at a given speed. Licensed under the GNU GENERAL PUBLIC LICENSE Version 3.

How to use it:

1. Load jQuery library and the jQuery imgCrossfade plugin at the end of the html document.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.imgCrossfade.js"></script>

2. Add a group of images to your webpage.

<div id="cycler">
  <img src="1.jpg" class="cf">
  <img src="2.jpg" class="cf">
  <img src="3.jpg" class="cf">
</div>

3. Set the width of the images to the main container and make the slideshow responsive.

#cycler {
  width: 600px; 
  max-width: 100%; 
  margin:30px auto;
}

4. Initialize the plugin to create a basic slideshow.

$("#cycler").imgCrossfade();

5. The Html & JavaScript to create a background slideshow.

<div id="cycler">
  <img src="1.jpg" class="cf-bg">
  <img src="2.jpg" class="cf-bg">
  <img src="3.jpg" class="cf-bg">
</div>

$("#cycler").bgimgCrossfade();

6. Adjust the default animation speed and transition delay.

$("#cycler").imgCrossfade({
  fading: 'fast',
  interval: 2000 // in ms
});

---

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