Minimalist Responsive Image Fader With jQuery - imgCrossfade

File Size: 16.2 KB
Views Total: 1383
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Responsive Image Fader With jQuery - imgCrossfade

Just another responsive, cross-fading slideshow plugin that allows you to fade through a series of images at a certain interval.

How to use it:

1. Put jQuery library and the jQuery imgCrossfade plugin at the bottom of your webpage.

<script src="//"></script>
<script src="js/jquery.imgCrossfade.js"></script>

2. Add your images into a DIV element.

<div id="example">
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />

3. Make the slideshow responsive.

#example {

  /* the common width of the images */
  width: 600px; 

  /* for responsiveness */
  max-width: 100%; 

4. Call the function on the DIV element and done.


5. Override the default animation speed and interval time.

  fading: 'medium',
  interval: 7000

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