jQuery Cycle Banner Slider
Here you go, just a quick tip for anyone out there that needs a quick slider. Just download the following Lastest JQuery and Lastest Cycle
body{background:#666;}
#wrapper{
margin:0 auto;
display:block;
width:600px;
padding:0;
}
.slide-cover{
position:relative;
width:500px;
}
#slider{
margin:150px 0px;
padding:0;
list-style:none;
width:500px;
height:auto;
-moz-box-shadow: 0px 0px 20px 0px #000;
-webkit-box-shadow: 0px 0px 20px 0px #000;
box-shadow: 0px 0px 20px 0px #000;
}
#slider li{
margin:0;
padding:0;
list-style:none;
width:500px;
height:auto;
}
/* Styles Nav */
#nav-slider{
position:absolute;
top:60px;
padding:0;
width:500px;
z-index:9999;
}
#nav-slider li{
position:absolute;
list-style:none;
width:50px;
height:50px;
background: url(arrow.png) no-repeat;
}
#nav-slider li.next{
right:0;
background-position:top right;
}
#nav-slider li.next:hover {background-position:right bottom;}
#nav-slider li.prev {
left:0;
background-position:top left;
}
#nav-slider li.prev:hover {background-position:left bottom;}
$(document).ready(function() {
$('#slider').cycle({
fx: 'scrollHorz',
timeout: 4000,
speed: 800,
next: '#nav-slider .next',
prev: '#nav-slider .prev',
height: 200,
pause: 1
});
});
<div id="wrapper">
<section class="slide-cover">
<ul id="slider">
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
</ul>
<ul id="nav-slider">
<li class="next"></li>
<li class="prev"></li>
</ul>
</section>
</div>