Simple jQuery Image Slider Plugin with Thumbnail Navigation - MicroSlider

MicroSlider is a lightweight and fast jQuery plugin for creating a clean image slider with auto-play functionality and configurable transition effects. The plugin will auto generate thumbnail images and use them as navigation controls for your slider.

How to use it:

1. Markup html structure

<div class="xm-rorate" id="id-xm-rorate">
<ul class="xm-rorate-img clearfix" id="id-xm-content">
<li><a href="#" target="_blank"><img src="1.jpg" alt="#"></a></li>
<li><a href="#" target="_blank"><img src="2.jpg" alt="#"></a></li>
<li><a href="#" target="_blank"><img src="3.jpg" alt="#"></a></li>
<li><a href="#" target="_blank"><img src="4.jpg" alt="#"></a></li>
<li><a href="#" target="_blank"><img src="5.jpg" alt="#"></a></li>
</ul>
<ul class="xm-rorate-con clearfix" id="id-xm-control">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li class="xm-rorate-slider" id="id-xm-slider"></li>
</ul>
</div>

2. The CSS for this demo.

<style type="text/css">  
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.xm-rorate {
width: 960px;
margin: 0 auto;
height: 580px;
overflow: hidden;
position: relative;
}
.xm-rorate-img {
position: absolute;
width: 500%;
height: 100%;
}
.xm-rorate-img li {
float: left;
width: 960px;
height: 100%;
}
.xm-rorate-img li a img {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.xm-rorate-con {
position: absolute;
right: 25px;
bottom: 15px;
}
.xm-rorate-con li {
margin-left: 10px;
border: 1px solid rgb(161,161,161);
border: 1px solid rgba(161,161,161,0.7);
float: left;
}
.xm-rorate-con li img {
display: block;
width: 38px;
height: 28px;
border: 1px solid rgb(25,25,25);
border: 1px solid rgba(25,25,25,0.7);
}
.xm-rorate-con li.xm-rorate-slider {
position: absolute;
border: 1px solid #4bf;
width: 40px;
height: 30px;
z-index: 2;
left: 0;
}
</style>

3. Include jQuery library and jQuery MicroSlider plugin on the page

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

4. Call the plugin with options

<script type="text/javascript">
$(function(){
$('#id-xm-rorate').Microslider({
content:'#id-xm-content',//container ID
control:'#id-xm-control',//controls ID
slider:'#id-xm-slider',	//slide ID
speed:350,	// transition speed
pace:2000,	// Frequency
width:960
});
});
</script>

---

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