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>

jQuery Code
$('#slider1') .cycle({
fx: 'fade', // here change effect to blindX, blindY, blindZ etc 
speed: 'slow', 
timeout: 2000 

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

Keep it up
13 January
How can I apply random effects on each call?
19 December
How we can create shortcode of this slider for wordpress Plugin ?
16 September
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
Now the images are cross fade on each other.. you can change speed: 'slow', to speed: 5000, and test.
20 August
15 July
Think Tank
Nice Script!

Keep it up...
comments powered by Disqus