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.

  • jQuery Image slider
  • jQuery Image slider
  • jQuery Image slider
  • jQuery Image slider
  • jQuery Image slider
  • jQuery Image slider
  • jQuery Image slider


HTML Code:

<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>

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

CSS Code
.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;
}
Download File

Total Downloads: 1664
Top