Minimalist jQuery Image Auto Fader Plugin - fader.js

fader.js is an extremely lightweight (~2kb unminified, unzipped) jQuery slideshow plugin that uses CSS opacity property to fade in / out a list images automatically and infinitely .

How to use it:

1. Load jQuery library and the jQuery fader.js script where you needed.

<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="jquery.fader.js"></script>

2. Insert a list of images you want to fade between.

<div class="fader">
  <ul>
    <li><img src="1.jpg"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.jpg"></li>
  </ul>
</div>

3. The required CSS for the image fader. Add the following CSS snippets into your existing CSS file.

.fader ul { position: relative; }

.fader img {
  position: absolute;
  top: 0px;
  left: 0px;
}

4. Initialize the plugin and specify the animation speed for the fade in / out effects.

$(function(){
  $(".fader").fader({
    delay: 2000 // in ms
  })
});

---

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