Carousel is a UI component used for for displaying a list of items, much like the standard List component. Additionally, it provides many useful hooks for customizing how the items are positioned and displayed. Lets look at some of the examples of Carousel/ Slide Show.

Javascript carousels

Javascript carousels are used to display some images or content, in a often narrow space, allowing the webdesigner to show much info in a limited space. They add some functionality to page, and in the same time some visual candy.

jCarousel

Riding carousels with jQuery. jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

Agile Carousel: JQuery Carousel Plugin

Full-Featured Example: Full-featured example including all available buttons such as previous, next, play, first, last, per slide and hover buttons.

JQuery UI Easing & Effects: Use any JQuery UI easing type and most effects. Example page shows “easeOutBack” easing and JQuery UI “fold” effect. Simple Carousel Example: Who needs all the bells and whistles? Nobody! Here is a more practical example showing the use of just two buttons.

flShow Carousel 2.0

flShow Carousel is a little Flash movie that you can use to enhance your web pages presenting your images with a nice and stylish carousel effect. It can be used as:
* a nice photo slideshow
* an effective product showcase
* a cool menu for your site
and much more. It is light and easy to configure by means of an external xml file.It is free; if you use it for commercial purposes a donation to support the project is strongly encouraged (see Disclaimer).

Carousel Control: Spotlight example

This example uses the YUI Carousel Control to showcase a simple spotlight example using its itemSelected event. In this example, you can use arrow keys to select items as well as click on an item to select it.

Though this functionality looks a little complicated, it is very easy to implement. This is because the YUI Carousel Control handles the keyboard event and the mouse click event for setting the selection. When an item is selected, the YUI Carousel Control triggers an itemSelected event. This example subscribes to the itemSelected event to display the selected image in the spotlight.

iCarousel

iCarousel is an open source (free) javascript tool for creating carousel like widgets. iCarousel is fully configurable. You can change any default option just initializating the class with an object in JSON.

XML Photo Gallery Pro

This advanced gallery is very easy to adapt for your own needs. Below are some of the features.
* Settings and image information in easy to understand xml file
* Very well documented
* Can contain an unlimited number of galleries and images
* Click left and right hand side of image to browse through images. Click top to visit link provided in the xml.
* Advanced linkage possibilities per image
* Fullscreen
* Uses SurroundLight technique

Image slideshow

This is a script with a preview pane at top, and a sliding filmstrip at the bottom.

Carousel.us

Carousel.us is a Javascript 3D carousel, using the MooTools framework.
It has been tested on Firefox 2+, Opera 9+, Safari 3+, IE 6+, Chrome 1.

jCarousel Lite?

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Flickr slideshow

If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework. Since long time I was looking for a simple way to implement a Flickr-like slideshow (”image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.Flickr-like slideshows

Share this article!

Share it your friends & colleagues and help us spread it to the World.