Cloud Carousel - A 3d Carousel in Javascript

There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript's favour, I have created this jQuery carousel plugin.

New version 1.0.5 works with IE9 (reflections now use Canvas and is much faster).

The above carousel features optional auto-reflections, and the information contained in the Alt and Title tags of the images can optionally be displayed as you hover over each image.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.

Features

  • Works with most browsers (tested on IE6-IE9, Firefox (incl V4), Chrome, Opera, Safari).
  • Accurate 3d perspective.
  • Optional auto reflections - no need to modify your images or add server code.
  • Easy integration with basic valid HTML and a tiny bit of JavaScript.
  • Small 5Kb (minified) script..
  • Degrades gracefully with Javascript turned off.
  • Fully accessible with no CSS or text only browsers.
  • Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
  • Optional mouse wheel support as of version 1.0.2.
  • It's completely free.
Flag 1 Flag 2 Flag 3 Flag 4 Flag 5 Flag 6 Flag 7 Flag 8 Flag 9 Flag 10 Flag 11 Flag 12 Flag 13 Flag 14 Flag 15

The above carousel uses the auto-rotation option and the bring-to-front option. It uses 'cheat' reflections that are just part of the image. This can improve performance if you have a lot of items.

Sites Using Cloud Carousel

(If you've previously sent me a link to your site and it's not here, please send me an email).

Studio Mauriks

Mindy Linkous

solutionsforagilebusiness.co.uk

dr-solutions.com

demo.pure-joomla.com

custom-anything.com/gallery

optikaicsalodas.hu (bottom of page)

Lunar Clips (for Drupal)

keytoyouroffice.com

infeniontech.com

cotswoldseeds.com

inspyre.co.nz

emmi-aktifit.ch

whatshot.metro.pk

It's certainly not compulsory, but if this software has been useful to you, then a link back to this page would be very welcome. Also, if you have used the plugin on your website, then send me a link and I'll be happy to post it here.

blog comments powered by Disqus
Share |

Useful website? You can donate to support it. Thanks.

Ajax Zoom

Ajax Zoom

Mouse over image zoom

360 degree spin tool

Need Good Hosting?

Hostgator Reliable Hosting

I use Host Gator for this site, and have found them to be good value and very reliable. Sign up now and use coupon code professorcloud to receive a $9.95 rebate.

Books to improve your JavaScript skills