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 #
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:
- Unique transitions to most other sliders - slice down/up, fold, box rain/random
- Plugins already available for popular CMS (Wordpress, Joomla & Drupal)
- Nice looking prebuilt themes
Sites I've implemented on:
jQuery Cycle
http://jquery.malsup.com/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:
- Huge number of effects
- Mature project, has been around since 2007
- Large number of demos available on the site
Sites I've implemented on:
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:
- Loading/countdown animation
- Very small at 4kb
- Compatibility: IE7+, FF 3.5+, Chrome, Safari
Sites I've implemented on:
bxSlider
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:
- A move slide quantity option (killer feature)
- Ticker option to have your images/slides constantly scrolling
- Great call back functions, next, previous, before and after.
Sites I've implemented on:
Coming soon