Minimalist jQuery Image Auto Fader Plugin - fader.js
File Size: | 3.05 KB |
---|---|
Views Total: | 1058 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.