Minimalist jQuery Image Auto Fader Plugin - fader.js

File Size: 3.05 KB
Views Total: 1061
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="jquery.fader.js"></script>

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

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

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.

    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.