In web design a carousel is an element giving visitors easy access to several content items. It is typically a dynamic scrolling list of items in horizontal 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).
Using sliding horizontal panels also known as Carousels and Sliders to feature top content is one of the strongest web design trends over the last couple of years. It’s a very effective method to increase the web site usability and engage the user.
The reason for this trend is mainly the arrival of jQuery that have made it almost a “walk in the park” to add a jQuery Carousel or jQuery image slider plugin to a web site.
Today there are many excellent free jQuery Carousel plugins available and it makes it difficult to choose the best. This article has been created specifically to help you get started using jQuery Carousels but you may also want to check out some jQuery Slider plugins.
Highly customizable jQuery Carousel plugin so you can build according to your requirements. JSON data format is used to provide easier integration with external data or data from your CMS. Use it for agile web development. This is an all new version written from scratch. JQuery UI effects and the ability to read files on the server are no longer included. New features are added, such as “Control Sets” which allow for a more customizable setup. Now posted on Github for faster development. Agile jQuery Carousel examples.
2. AVIA SLIDER
This plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
SlideDeck is a popular image slider script allowing you to organize any type of web content into a beautiful and user-friendly slider. Recently a WordPress version of this popular slider was made available, called SlideDeck2 and it is worth checking out for sure!
4. JQUERY BANNER ROTATOR / JQUERY SLIDER
This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.
5. Coin Slider
This jQuery slider features smooth transition effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
6. ESTRO JQUERY EFFECT SLIDER
This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.
rCarousel – yet another (but super duper) continuous jQueryUI carousel. It has lots of features and good examples.
This jQuery Carousel can do both horizontal and vertical sliders and in particular the horizontal carousel looks awesome. Really simple to use and it has good control options.
This jQuery 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.
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.
Each carousel can have own look & feel and behavior. Put next/previous button wherever you want or don’t put anywhere its up to you. The most important part is; it returns a carousel object and do whatever you want.
This is is an awesome and very powerful jQuery Carousel for WordPress. Really suggest you check it out if you use WordPress.
12. BX Slider
This popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image.
14. RoundAbout for jQuery – cool and different jQuery Carousel
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.
16. Wow Slider
WOW Slider is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing.
Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.
19. Carou Fredsel
This plugin has been rewritten using jQuery UI’s Widget Factory with a few extra features including autoScroll
Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.
23. 3d Carousel
24. Anything Slider
AnythingSlider brings together the functionality of all previous sliders and their features.
26. Dual slider
27. Liquid Carousel
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.
This is a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. This works with thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.
This effect creates progressively enhanced slideshow with a fancy transitioning effect.
This plugin builds on the builtin WordPress gallery, and replaces any gallery inserted using the tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.
Supersized jQuery plugin is a full screen background and slideshow that you can use to satisfy the craving of your clients for big and wonderful pictures.
Step jQuery Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.
Thumbnails Navigation Gallery with jQuery is an extraordinary gallery with scrollable thumbnails that slide out from a navigation. It has a menu of albums where each item can reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or the right.
Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.
44. Nivo Slider
Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.
jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.
Unlike most carousel plugins which stop when they get to the last image, this one allows the show to go on infinitely without any user intervention.
48. SEXY SLIDER
49. jQuery Carrousel
Moodular is a jQuery plugin which allows to create carousel/slider very easily. Moodular comes from the contraction of two words : mood & modular.
Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.
52. Floom (MooTools)
Floom is an extendible blinds-like slideshow widget for MooTools 1.3+.