Full-Width Responsive jQuery Slider / Banner Rotator Plugin

Just another jQuery slider plugin that creates a responsive image slider & banner rotator to switch featured images/contents with a fade effect and dots/arrows navigation support.

View more:

• Top 50 Best Carousel jQuery Plugins

How to use it:

1. Load the jQuery javascript library and slider.js at the end of the document.

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

2. Markup html structure.

<div class="banner">
<div class="slider">
<ul>
<li> <a href="#"> <img src="slider01.jpg" width="1920" height="447"> </a> </li>
<li> <a href="#"> <img src="slider02.jpg" width="1920" height="447"> </a> </li>
<li> <a href="#"> <img src="slider03.jpg" width="1920" height="447"> </a> </li>
<li> <a href="#"> <img src="slider04.jpg" width="1920" height="447"> </a> </li>
</ul>
<div class="dots"> 
<a href="javascript:void(0);" rel="0" class="cur"></a> 
<a href="javascript:void(0);" rel="1"></a> 
<a href="javascript:void(0);" rel="2"></a> 
<a href="javascript:void(0);" rel="3"></a> 
</div>
<div class="arrow"> 
<a href="javascript:void(0);" class="btn-left">&lt;</a> 
<a href="javascript:void(0);" class="btn-right">&gt;</a> 
</div>
</div>
</div> 

3. The CSS to style the image slider/banner rotator.

.banner {
margin-bottom: 20px;
z-index: 1;
}
.banner .slider {
position: relative;
}
.banner .slider ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 447px;
overflow: hidden;
position: relative;
}
.banner .slider ul li {
position: absolute;
top: 0;
left: 50%;
}
.banner .slider .dots:after {
display: table;
clear: both;
content: "";
}
.banner .slider .dots {
position: absolute;
bottom: 20px;
left: 60%;
z-index: 40;
 *zoom: 1;
}
.banner .slider .dots a {
display: block;
float: left;
width: 12px;
height: 12px;
margin-right: 10px;
text-indent: -9999em;
background: #000;
border-radius: 10px;
}
.banner .slider .dots .cur {
background: #329;
}
.banner .slider .arrow {
width: 65%;
position: absolute;
top: 45%;
left: 18%;
z-index: 50;
}
.banner .slider .arrow a {
font-family: "Microsoft YaHei";
font-size: 34px;
font-weight: 700;
color: #fff;
}
.banner .slider .arrow .btn-left {
float: left;
}
.banner .slider .arrow .btn-right {
float: right;
}

5. Call the plugin with available options.

<script type="text/javascript">
$(document).omSlider({
slider: $('.slider'),
dots: $('.dots'),
next:$('.btn-right'),
pre:$('.btn-left'),
index: 0,
timer: 5000,
showtime: 800
});
</script>

---

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