Simple jQuery Auto Image Rotator

Lets create a very simple jQuery image rotation script using jQuery cycle plugin. 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


Change Effect:

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: 2000 
});
}); 


Download Code Files Total Downloads: 17792
Comments
19 February
2014
Vinay Kashyap
This is nice script my project is useful.It is Very cool and attractive image slider.

Keep it up
13 January
2014
Jatinder
How can I apply random effects on each call?
19 December
2013
wajee
How we can create shortcode of this slider for wordpress Plugin ?
16 September
2013
Godoryu
Thank you for this, really helpful, have been struggling to get my coding right for ages, this is a quick solution!

However I need some help with the coding, instead of fading directly out, how do I edit the code so there is cross fade between the images?
18 September
2013
Rishi
Now the images are cross fade on each other.. you can change speed: 'slow', to speed: 5000, and test.
20 August
2013
sudheera
Awesome,Thanks!
15 July
2013
Think Tank
Nice Script!

Keep it up...
comments powered by Disqus