Javascript (jQuery) sliders round up

I’ve used a number of Javascript based image sliders on a number of projects in the last year. They all have some points of difference so I thought I’d share what they are and make people aware of them.

Nivo Slider #

http://nivo.dev7studios.com/

Nivo Slider
Nivo Slider

I’m currently using Nivo slider on this website for the home page. It’s currently pulling in the Featured Post image  using a custom function for my Wordpress theme. Nivo slider has a great set of animation effects and has a number of options. If you want a no hassle installation for Wordpress Dev7Studios offer a paid plugin as well. There are even a number of other platforms already supported with Drupal, Joomla and Sitefinity.

What I like about Nivo slider is the different types of transitions rather than just the standard slide in from left to right/ top to bottom.   I’m using “sliceDown” on my own site, where it segments up the image and makes each segment slide down, a unique different effect to most other sliders around. Check out the demo page here to see the prebuilt themes too.

Points of difference:

Sites I’ve implemented on:

andrewford.co.nz

 

jQuery Cycle

http://jquery.malsup.com/cycle/

 

jQuery Cycle
jQuery Cycle

This great plugin has the most effects of all the sliders here, it also has the honor of being the oldest project of the round up. Very highly configurable, huge number of options and can be paused, progressed etc from a JavaScript call. I’ve used it on multiple projects and combined with jQuery easing the transition effects can be very smooth and extended (ease in, bounce etc).

Points of difference:

Sites I’ve implemented on:

zespri.com

offerzone.co.nz

Orbit

http://www.zurb.com/playground/orbit-jquery-image-slider

Orbit is a new comer to the group that uses CSS3 to keep the size of the library down to a mere 4kb. It also has a nice loading animation/pause button.

Points of difference:

Sites I’ve implemented on:

cv.andrewford.co.nz

bxSlider

http://bxslider.com/

This is my current favorite slider. I’m currently using it to do two complete types of transition on the same page, one a simple fade with a pager control and the other a carousel type cycle where I show 3 items and scroll only one at a time using a previous and next buttons. There are a ton of options and plenty of call back functions. Like a before the slider loads so I could stop horrible flashing of images before they were positioned.

Points of difference:

Sites I’ve implemented on:

Coming soon

Tags:
 animation,
 carousel,
 css3,
 javascript,
 jquery,
 slider