jQuery Cycle Plugin

15 Oct

jQuery Cycle Plugin

jQuery Cycle Plugin is a lightweight jQuery plugin which offers an easy way to create a slideshow of images for your website.

The plugin provides a bunch of different effects for cycling between each slide, from a simple fade to the more elaborate ‘shuffle effect’, you can choose to cycle through each slide on a time delay or for it to be initiated by the user through a click.

The jquery Cycle Plugin does not only cycle through images but it can also cycle through <divs> which can contain text and images, allowing for more freedom of what goes into each slide of the slideshow.

I prefer the fading option and use it for small advertisements on a number of domains or sometimes as the main focus of a website (such as small accommodation sites). The effect is not as clean or visually sharp as a flash movie but it takes a lot less time to implement and does not require flash, therefore it will display in android devices and on the iPhone with no problems.

Implementing the code is easy, list the images inside a <div> and then specify the plugin to cycle through that <div> by using the small piece of code provided on the jQuery Cycle Plugin website.

jQuery Cycle is easy to set up, run and configure, while the end result can help give a website that extra feel of professionalism. I am a big fan of the jQuery Cyle plugin and have used it in quite a few websites to great effect.

Download jQuery Cycle Plugin at:

jQueryCycle

About the Author: Richard Havelock (9 Articles)

Web designer, developer and SEO expert based in Newcastle upon Tyne, UK. Richard has over 5 years experience as a web designer / developer and is currently head of SEO at ne-web Ltd. He is also the co-founder of successful NUFC Blog: Leazes Terrace. You can follow Richard on twitter: @websdevelopment

10 Responses to “jQuery Cycle Plugin”

  1. malsup 16. Oct, 2009 at 4:08 pm #

    Plugin files temporarily moved:

    http://www.malsup.com/jquery/cycle2/

  2. Website Kings 19. Oct, 2009 at 5:42 pm #

    Sound really good, we will give it a go!

  3. Web Design Norwich 14. Aug, 2010 at 4:34 pm #

    This looks useful, i will give this a go, thanks!

  4. Alex 27. Aug, 2010 at 12:29 pm #

    thanks for the info. really great plugin!

  5. Truong 03. Sep, 2010 at 10:20 am #

    this is very useful,i like it.Thank!!!

  6. Surge 14. Dec, 2010 at 6:59 pm #

    THanks for the post. The link is very helpful thanks for sharing. I am wondering what advantage does jQuery have over flash?

  7. Web Developer 23. Dec, 2010 at 1:20 pm #

    @Surge

    There are many advantages of jQuery over flash but the main one for me is that the jQuery Slideshow mentioned in this post works on iPhones and iPads etc where as a flash slideshow would not be supported. This means that your users can get a full experience of your website no matter what browser / platform they are using.

  8. Android App Developer 27. Jan, 2011 at 7:06 am #

    Thanks a lot for sharing, this post is very useful. Keep up the good work.

  9. Web Dev Rob 04. Feb, 2011 at 3:08 pm #

    Also, remeber if you’re literally just using the fade effect with this plugin you should use the cycle lite plugin – whihc is a lot smaller and lightweight.

  10. Web Developer 04. Mar, 2011 at 2:22 pm #

    Hi Rob, thanks for the ocmment.

    You are dead right about the Cycle Lite Plugin, if you are just wanting the fade effect I would definitely recommend using that. It still allows pause when hovering over it as well as a few other decent features too.

    Apologies on the late reply, I never have time to write any posts or even check comments!

Leave a Reply