Basic jQuery Image Slider with Fade In Effect

A very basic and lightweight jQuery plugin to create an image slider/slideshow with a simple fade-in effect.

How to use it:

1. Include the latest version of jQuery library from a CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Create an image slider with a little bit of markup.

<div id="slider">
<div>
<div class="slide" style="display:none;"> <img src="1.jpg" alt="" /> </div>
<div class="slide" style="display:none;"> <img src="2.jpg" alt="" /> </div>
<div class="slide" style="display:none;"> <img src="3.jpg" alt="" /> </div>
<div class="slide" style="display:none;"> <img src="4.jpg" alt="" /> </div>
</div>
</div>

3. The sample CSS to style the image slider.

#slider {
width: 960px;
height: 380px;
position: relative;
z-index: 0;
overflow: hidden;
padding: 9px;
border: 1px solid #ccc;
}
.slide {
float: left;
width: 960px !important;
}
#slider img {
width: 960px;
height: 380px;
position: relative;
z-index: -100;
}
#prev, #next {
z-index: 100;
position: absolute;
top: 45%;
display: block;
width: 32px;
height: 32px;
text-indent:-9999px;
opacity: 0.8;
}
#prev {
left: 25px;
background: url(../images/prev.png) 0 0 no-repeat;
}
#next {
right: 25px;
background: url(../images/next.png) 0 0 no-repeat;
}
#prev:hover, #next:hover {
opacity: 1;
}

4. Add the following JS snippet to your javascript file or include the main.js on your web page directly.

jQuery(document).ready(function(){

jQuery('<a id="prev" href="#">Prev</a>').appendTo("#slider");
jQuery('<a id="next" href="#">Next</a>').appendTo("#slider");

var slide = jQuery("#slider .slide");
jQuery("#slider .slide").first().show();


jQuery("#prev").click(function(){
var currentSlide = jQuery("#slider .slide:visible");
if (currentSlide.prev().length > 0) {
currentSlide.prev().fadeIn("slow").show();
}
else {
slide.last().fadeIn("slow").show();
}
currentSlide.fadeTo("slow").hide();
});
jQuery("#next").click(function(){
var currentSlide = jQuery("#slider .slide:visible");
if (currentSlide.next().length > 0) {
currentSlide.next().fadeIn("slow").show();
}
else {
slide.first().fadeIn("slow").show();
}
currentSlide.fadeTo("slow").hide();
});

});

---

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