Clean and Simple jQuery Slideshow Plugin

A super simple and clean jQuery plugin for creating a image slideshow with thumbnails and cool transition effects for showcasing the feature content of your website. 

Features:

• Supports Auto Play
• Supports thumnails highlight on hover
• Cool image switching effect
• super simple and easy to use

How to use it:

1. Include jQuery library on the web page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Markup html structure

<div id="box">
<ul class="big_img">
<li><a href="#"><img src="img/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/5.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/6.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/7.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/8.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/9.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/10.jpg" alt=""/></a></li>
</ul>
<ul class="slider_title">
<li><a href="#">Title 1</a></li>
<li><a href="#">Title 2</a></li>
<li><a href="#">Title 3</a></li>
<li><a href="#">Title 4</a></li>
<li><a href="#">Title 5</a></li>
<li><a href="#">Title 6</a></li>
<li><a href="#">Title 7</a></li>
<li><a href="#">Title 8</a></li>
<li><a href="#">Title 9</a></li>
<li><a href="#">Title 10</a></li>
</ul>
<ul class="slider_list">
<li index='1' class="current"><a href="#"><img src="img/small_1.jpg" alt="" /><span class="border"></span></a></li>
<li index='2'><a href="#"><img src="img/small_2.jpg" alt="" /><span class="border"></span></a></li>
<li index='3'><a href="#"><img src="img/small_3.jpg" alt="" /><span class="border"></span></a></li>
<li index='4'><a href="#"><img src="img/small_4.jpg" alt="" /><span class="border"></span></a></li>
<li index='5'><a href="#"><img src="img/small_5.jpg" alt="" /><span class="border"></span></a></li>
<li index='6'><a href="#"><img src="img/small_6.jpg" alt="" /><span class="border"></span></a></li>
<li index='7'><a href="#"><img src="img/small_7.jpg" alt="" /><span class="border"></span></a></li>
<li index='8'><a href="#"><img src="img/small_8.jpg" alt="" /><span class="border"></span></a></li>
<li index='9'><a href="#"><img src="img/small_9.jpg" alt="" /><span class="border"></span></a></li>
<li index='10'><a href="#"><img src="img/small_10.jpg" alt="" /><span class="border"></span></a></li>
</ul>
</div>

3. The CSS

#box {
width: 700px;
margin: 40px auto;
border: #CCC solid 1px;
position: relative;
height: 100%;
}
.current {
display: block;
}
.big_img {
width: 700px;
height: 320px;
overflow: hidden;
}
.slider_title {
position: absolute;
top: 266px;
width: 100%;
height: 58px;
background: url(../img/title_bg.fw.png) repeat;
filter: Alpha(Opacity="90")
}
.slider_title a {
font-size: 22px;
font-family: Arial, Helvetica, sans-serif;
color: #98E404;
text-decoration: none;
display: block;
height: 55px;
line-height: 55px;
padding-left: 15px;
}
.slider_list {
background: #000;
width: 700px;
position: absolute;
top: 320px;
margin-top: -3px;
padding-top: 8px;
padding-bottom: 7px;
}
.slider_list li {
opacity: 0.5;
filter: Alpha(Opacity="50");
display: inline;
float: left;
margin: 0 0 0 9px;
position: relative;
width: 60px;
height: 60px;
}
.slider_list .current {
position: relative;
background: none;
opacity: 1;
;
filter: Alpha(Opacity="100")
}
.slider_list .current .border {
position: absolute;
display: block;
background: #98E404;
width: 60px;
height: 4px;
overflow: hidden;
left: 0;
bottom: 0;
}

4. The javascript

<script type="text/javascript">
var myTimer;
var currentIndex = -1;	
var $big = $('.big_img li');	
var $title = $('.slider_title li');
var $small = $('.slider_list li');	
function show(){		
	var next = currentIndex < ($big.length -1)? currentIndex+1:0;
	showImg(next);
}

function showImg(index){			
	$($big[index]).stop().fadeIn().siblings().stop().fadeOut();
	$($title[index]).stop().show().siblings().stop().hide();
	$($small[index]).addClass('current').siblings().removeClass('current');
	currentIndex = index;
}
	
$(function(){
	myTimer = setInterval("show()",3000);

	$big.hover(function(){clearInterval(myTimer);},function(){myTimer = setInterval("show()",3000);});

	$small.hover(function(){
		var index = $(this).attr('index');
		clearInterval(myTimer);
		showImg(index-1);
	},function(){
		myTimer = setInterval("show()",3000);
	});
	show();		
});
</script>

---

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