jQuery Image Rotator With Next Previous Button

Lets create a very simple jQuery image rotation script using jQuery cycle plugin with next and previous button. Apart from fade-in or fade-out effect you can user other transition effect provided by cycle plugin. Transition effect supported by cycle plugin are blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom. You can download cycle plugin js file from here.

• 
• 
• 
• 
• 
• 
• 

<ul id="slider1">
<li><img border="0" src="images/img1.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img2.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img3.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img4.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img5.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img6.jpg" width="624" height="345" /></li>
<li><img border="0" src="images/img7.jpg" width="624" height="345" /></li>
</ul>

$(document).ready(function(){
$('#slider1') .cycle({
fx: 'fade', // here change effect to blindX, blindY, blindZ etc
speed: 'slow', 
timeout: 0,
next: '#next', 
prev: '#prev' 
});
});

.slider{
  margin: 0 auto;
  width: 625px;
  height: 345px; 
  border: 8px solid #FFFFFF;
  border-radius:5px;
  box-shadow: 2px 2px 4px #333333;
  position: relative;
}

.slider_next{
  width: 62px;
  height: 62px;
  background: #f8f8f8;
  position: relative;
  border-radius: 70px;
  position: absolute;
  z-index: 99;
  top: 130px;
  left: -35px;
  padding: 5px 0 0 5px; 
  cursor: pointer; 
}

.slider_prev{
  width: 62px;
  height: 62px;
  background: #f8f8f8;
  position: relative;
  border-radius: 70px;
  position: absolute;
  z-index: 99;
  top: 130px;
  left: 595px;
  padding: 5px 0 0 5px; 
  cursor: pointer;
}