Basic jQuery Image Slideshow Plugin with Auto Play - btSlider

btSlider is a really simple jQuery plugin that provides an easiest way to create an auto-play image slider/slideshow with fade in/out effects.

Basic Usage:

1. Load the latest version of jQuery library and jQuer btSlider plugin in the Html document.

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

2. Create an image slideshow with pagination and prev/next controls.

<div id="my-gallery" class="slideShow">
<ul class="items">
<li><img src="img/pic1.jpg"></li>
<li><img src="img/pic2.jpg"></li>
<li><img src="img/pic3.jpg"></li>
<li><img src="img/pic4.jpg"></li>
<li><img src="img/pic5.jpg"></li>
</ul>
<ul class="pagination">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="preNext pre"></div>
<div class="preNext next"></div>
</div>

3. Initialize the slideshow and set the interval between each slide.

<script type="text/javascript">
$(function(){
$('#my-gallery').btSlider({
'interval':4000
});
});
</script>

4. Style the image slideshow via CSS.

.slideShow {
width: 100%;
overflow: hidden;
position: relative;
}
.items {
width: 500px;
height: 340px;
overflow: hidden;
position: relative;
list-style: none outside none;
padding: 0;
margin: 0;
}
.items li {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.items li:first-child {
display: block;
}
.items li img {
width: 500px;
height: 340px;
}
.pagination {
float: right;
list-style: none;
margin: 0 10px;
position: relative;
bottom: 25px;
}
.pagination li {
text-align: center;
color: #fff;
float: left;
width: 20px;
height: 20px;
line-height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #000;
border-radius: 20px;
}
.pagination li:hover {
background: #C20305;
}
.pagination li.active {
background: #C20305;
}
.preNext {
width: 45px;
height: 100px;
position: absolute;
top: 90px;
background: url(../img/sprite.png) no-repeat 0 0;
cursor: pointer;
}
.pre {
left: 0;
}
.next {
right: 0;
background-position: right top;
}

---

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