Tiny jQuery Image Carousel with Fade Animation - Fader

Fader is a simple and lightweight jQuery plugin for creating an image carousel that features auto play, infinite loop and adjustable fade animation.

Basic Usage:

1. Load the jQuery fader plugin on the page, after jQuery javascript library.

<link rel="stylesheet" type="text/css" media="screen" href="css/fader.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/fader.js"></script>

2. Wrap the images in an DIV element and create the html for the controls.

<div id="fader">
<div id="fader_img"> 
<img src="images/1.jpg"> 
<img src="images/2.jpg"> 
<img src="images/3.jpg"> 
</div>
<div id="fader_left"> 
<a href="#"> <img src="fader_images/fader_left.png" id="sl"> <img src="fader_images/fader_left2.png" id="sl2"> </a> 
</div>
<div id="fader_bips"> </div>
<div id="fader_right"> 
<a href="#"> <img src="fader_images/fader_right.png" id="sr"> <img src="fader_images/fader_right2.png" id="sr2"> </a> 
</div>
</div>

3. Initialize the image carousel with options.

<script type='text/javascript'>
$(function(){
$('#slider').begin({
autoplay: true,
auto_speed: 5000,
fade_speed: 500,
width: 640,
height: 424
});
});
</script>

---

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