jQuery cycle plugin

Examples of jQuery cycle plugin options

Examples of jQuery cycle plugin options

Where would we be without jQuery, the JavaScript library that speeds up development no end?

I’ve recently been using the Bootstrap 2.3.2 CSS framework within our content management system, TerminalFour Site Manager and I ran into a number of issues with its built-in carousel.

The requirement we had was that the user should be allowed to choose however many carousel slides as she wanted: 1, 2, 5… 10? Which was fine, except that if we were to use the built-in Bootstrap carousel it uses very specific code which requires HTML5 data-* attributes and I didn’t fancy a) relying on the user to have to fill this in, or b) having to write some JavaScript or PHP to generate the code dynamically. Because I’m lazy like that!

So, I moved the carousel over to use a jQuery plugin that we’ve been using for a few years now: jQuery Cycle Plugin by malsup.

One of the things that I really like about this plugin is that it will create a carousel/cycle out of just about anything. For example, to create a simple carousel all you need is something as simple as:

<div class="slideshow">
  <img src="image-1.png" />
  <img src="image-2.png" />
  <img src="image-3.png" />
</div>

and then you call it from within your JavaScript like this:

$('.slideshow').cycle();

Brilliant!

If you want to add pagers, arrows or a variety of effects then jQuery Cycle Plugin will handle all of those to, dynamically creating the additional HTML to inject into your page much of which you have control of, such as class names which you can then use CSS to style.

We’ve found this to be a particularly useful plugin when using T4 Site Manager.

The plugin author has recently released a new version Cycle2 which I’ve still to check out, but if it’s anywhere as good as the first version then I imagine we’ll be moving to that in the not too distant future.

If you’re looking for a good, versatile carousel plugin then you can’t go far wrong adding this to your jQuery toolbox.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s