jQuery Cycle Banner Slider
What I Did!

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>