Simple jQuery Auto Loop Image Slideshow Plugin

Just another jQuery image slideshow plugin that features auto play, infinite loop, pause on hover and fade in/out transitions.

Basic Usage:

1. Load the required jQuery javascript library on your web page.

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

2. Create the Html for an image slider with next/prev controls.

<div id="slider">
<img id="1" src="images/image1.png"/>
<img id="2" src="images/image2.jpg"/>
<img id="3" src="images/image3.jpg"/>
<img id="4" src="images/image4.jpg"/>
</div>
<a class="left" href="#">Previous</a>
<a class="right" href="#">Next</a>

3. The jQuery script.

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
$("#slider > img#1").fadeIn(300);
startSlider();

});

function startSlider() {
count = $("#slider > img").size();

function loop() {
$("#slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);

sliderInt = sliderNext;
sliderNext = sliderNext + 1;

if(sliderNext > count) {
sliderNext = 1;
}
}

interval = setInterval(loop, 3000);

$("img").hover(function() {
clearInterval(interval);
$("p").fadeIn(0);
}, function() {
interval = setInterval(loop, 3000);
$("p").fadeOut(0);
});


$("a.left").click(function() {
clearInterval(interval);

sliderNext = sliderInt - 1;
if(sliderInt == 1) {
sliderNext = 4;
}

$("#slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);

sliderInt = sliderNext;
sliderNext = sliderNext + 1;

if(sliderNext > count) {
sliderNext = 1;
}

interval = setInterval(loop, 3000);
});


$("a.right").click(function() {
clearInterval(interval);

sliderNext = sliderInt + 1;
if(sliderInt == 4) {
sliderNext = 1;
}

$("#slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);

sliderInt = sliderNext;
sliderNext = sliderNext + 1;

if(sliderNext > count) {
sliderNext = 1;
}

interval = setInterval(loop, 3000);
});

};

4. The sample CSS to style the slider and controls.

#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 600px;
height: 400px;
float: left;
display: none;
}
p {
text-align: center;
display: none;
color: red;
}
a {
padding: 5px 10px;
background-color: #f7f7f7;
margin-top: 30px;
text-decoration: none;
color: #666;
}
a.left {
float: left;
}
a.right {
float: right;
}

---

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