50+ Best jQuery Carousel Roundup

by Dustin Betonio on January 28, 2012

jquery-carousel

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 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 sliders.


Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.


WooThemes - Made by Designers
WooThemes - Made by Designers

Advertisement

1. Agile jQuery Carousel

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.

Agile jQuery Carousel

2. AVIA SLIDER

image

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.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

3. 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.

jquey carousel, jcarousel

4. JQUERY BANNER ROTATOR / JQUERY SLIDER

jquery banner

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.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

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+

image

6. ESTRO JQUERY EFFECT SLIDER

ESTRO JQUERY EFFECT SLIDER

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.
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.

MORE INFO / DEMO – by CodeCanyon (premium plugin)

7. Rcarousel

rCarousel – yet another (but super duper) continuous jQueryUI carousel. It has lots of features and good examples.

jquey carousel, Rcarousel

8. Theatre Carousel

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.

Theatre Carousel

9. Cloud Carousel

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.

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.

Cloud Carousel

10. jQuery Ms Carousel

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.

jquery Ms Carousel

11. Carousel WordPress Plugin

This is is an awesome and very powerful jQuery Carousel for WordPress. Really suggest you check it out if you use WordPress.

Carousel WordPress Plugin

12. BX Slider

55m4

13. jQuery popeye 2.0

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.

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 for jQuery

15. Roundabout Shapes

Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

55m10

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.

Wow Slider

17. Icarousel

Carousel is an open source (free) javascript tool for creating jQuery carousel like widgets

iCarousel - Horizontal images slider

18. Carousel Slideshow

Carousel Slideshow is a fabulous DHTML script for the showcasing of images on your site. It displays images in a 3D, carousel fashion.

55m14

19. Carou Fredsel

55m19

20. jQuery Carousel plugin

This plugin has been rewritten using jQuery UI’s Widget Factory with a few extra features including autoScroll

jQuery Carousel plugin

21. Making Mosiac Slideshow with jQuery and CSS

Making Mosiac Slideshow with jQuery and CSS

22. Barousel

Barousel is a jQuery plugin to easily generate simple carousels where each slide is defined by an image + any type of related content.

Barousel is a jQuery plugin

23. 3d Carousel

55m30

24. Anything Slider

AnythingSlider brings together the functionality of all previous sliders and their features.

anything slider

25. jDigiclock slider

55m24

26. Dual slider

55m25

27. Liquid Carousel

55m27

28. slides

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.

Slides is a slideshow plugin for jQuery

29. FBISCarousel

55m32

30. jCarousel

55m2

31. Feature jQuery carousel

55m28

32. K3d jQuery Carousel

55m16

33. Prototype UI Carousel

Prototype

34. 3d Rotation Viewer

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.

image

35. Full Page Image Gallery with jQuery

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.

image

36.HTML5 Slideshow w/ Canvas and jQuery

This effect creates progressively enhanced slideshow with a fancy transitioning effect.

image

37. How to Create a jQuery Carousel with WordPress Posts

how-to-create-with-wordpress-posts-jquery-carousel-plugins-resources-tutorials-examples

38. jQuery Carousel Gallery for WordPress

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.

jQuery Carousel Gallery for WordPress

39. Making an infinite JQuery carousel

Making an infinite JQuery carousel

40. Just Another Carousel

image

41. Supersized jQuery plugin

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.

image

42. Step jQuery Carousel Viewer

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.

step jquey carousel

43. Thumbnails Navigation Gallery with jQuery

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.

image

44. Sideways – Fullscreen Gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

image

44. Nivo Slider

Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.

image

45. JCoverflip

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

image

46. jQuery Infinite Carousel Plugin

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.
If you have three images you want to display, after the third image has been displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.

infinite jquey carousel

47. jMyCarousel

jMyCarousel is a free, highly customizable, non obstructive carousel written in javascript, based on jquery, and created to suit any need. It enables to display a list or gallery of images in a dynamic way. It can be adapted very easily to any layout, and the way it animates the picture is adaptable.

jquey carousel, Jmycarousel

48. SEXY SLIDER

sexy slider

SexySlider is a jQuery slider plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

MORE INFO / DEMO – by CodeCanyon (premium plugin)

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.

jquey carousel

50. Step Carousel Viewer

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.

image

51. Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. Its goal is to simplify the process of creating professional image galleries for the web and mobile devices.

image

52. Floom (MooTools)

Floom is an extendible blinds-like slideshow widget for MooTools 1.3+.

image

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

 

{ 34 comments… read them below or add one }

Web Design Nottingham June 19, 2011 at 10:14 pm

So many options!

Reply

Madeline June 21, 2011 at 7:15 pm

This is awesome! I’m always looking for new jquery sliders. Thanks for posting!

Reply

lvraa June 21, 2011 at 8:01 pm

You are welcome, year it is great to have a good personal collection ;)

Reply

Web Development June 27, 2011 at 9:06 am

Awesome list..It’s difficult to pick one, but for now jCoverflip seems to fit my requirement. I’ve bookmarked this page to try other carousels in future. Thanks for sharing this list.

Reply

backofenbau July 4, 2011 at 10:01 pm

Wow, the best list i´ve ever seen! Thanks for sharing!

Reply

Lars July 4, 2011 at 10:57 pm

thanks a lot for the positive feedback!

Reply

Hafeez Ansari August 27, 2011 at 11:22 am

Nice collection. Please keep it up!

Reply

????? ???? August 27, 2011 at 1:36 pm

thanks , very useful

Reply

El August 30, 2011 at 9:04 am

Great, thank you!

Reply

lalit mahajan August 31, 2011 at 12:45 am

very helpful for new designers
thanks

Reply

mackinven September 28, 2011 at 3:27 am

Great list. I went for Richard Scarrott’s carousel, very nice widget.

Reply

jake September 28, 2011 at 9:56 pm

Thanks for the list. Looking for a stripped down version of jCarousel to use in conjunctions w/ some sort of jquery slider. I like Rcarousel!

Reply

Seo October 13, 2011 at 3:00 pm

Awesome, realy great collection!

Reply

nickel October 18, 2011 at 10:20 pm

the 11 use mootools, not jquery

Reply

Linda Lee November 19, 2011 at 7:45 am

This is the fun stuff in webdesign. I can hardly wait to try some of these out for my clients.
I was looking for a sideways slider and I am thrilled to have found your great list.
Thanks for sharing!

Reply

Frank November 21, 2011 at 1:25 pm

Hi Dustin,

really great and comprehensive collection.
At the moment I am looking for a very special carousel: I would like to display an RSS Feed (the first picture out of a feed-item and the title etc.) in a carousel. I know this can be done with wordpress, but I am not using wordpress and have only RSS-Feeds (or Atom etc.) available.
Are there tools which already have this functionality? Can anybody point me in the right direction?

Thanks Frank

Reply

Batuhan Küçükali December 5, 2011 at 2:52 pm

thank you perfect collection …

Reply

Saleem Mohammad December 19, 2011 at 11:15 am

I am beginner in development field I searching new jQuery sliders you have a nice collection of jQueries.

Reply

Izrada web Stranica December 20, 2011 at 4:42 pm

Amazing collection, thanks :)

Reply

Jesus January 6, 2012 at 6:57 pm

This is a great post! Thanks a lot!

Reply

Jakup January 18, 2012 at 12:10 am

Thans for the collection. I am developing one as well. Lemmon Slider @ http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php

Reply

colorfolio January 27, 2012 at 2:17 pm

nice selection :) thx

Reply

findw3 January 28, 2012 at 2:52 pm

nice collection. Thanks

Reply

Mark Simchock January 28, 2012 at 5:51 pm

Nice round up. However, it would help to know which ones, if any, are responsive.

That said, I’ve bumped into these two in my quest for a responsive slider that I can count on:

http://flex.madebymufffin.com/

http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

Both have their pluses and not-so-pluses.

Reply

Lars January 28, 2012 at 11:56 pm

Awesome thanks. You are right – responsive design is the future!

Reply

Peter Arnhem January 29, 2012 at 7:50 pm

Jcoverflip fits the bill! Thanks for the list, awesome!

Reply

Paul Baker January 29, 2012 at 10:10 pm

Great round up, it saved me time. Thanks for putting it together.

Reply

nefilas January 30, 2012 at 5:36 pm

Thanks a lot, I needed a lightweight carousel to show multiple images AND captions AND be linkable AND work in IE, I am of course in love with Nivo for one-image sliders/galleries but for this, jCarousel Lite fits the bill!

Reply

Marcus January 30, 2012 at 5:59 pm

What about including a touch enabled carousel in this list for iOS/android?

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

Reply

Web Design January 31, 2012 at 10:58 am

jqury is the king and you are thebst
TANK You

Reply

Verner Jacobsen February 3, 2012 at 3:13 pm

I really liked jPages:
http://luis-almeida.github.com/jPages/

Very unobtrusive, it doesn’t apply any styles.

Reply

Wojciech Ryrych February 4, 2012 at 7:19 pm

Hey! You are showing the same image and info as in June roundup. rcarousel was updated a few times since then!

Reply

Arthur Boettger February 9, 2012 at 7:59 pm

god job

Reply

Philippine Christians February 14, 2012 at 10:05 am

Very well explanation to understand. Thanks for great script.!!! Cheers!

Reply

Leave a Comment

Previous post:

Next post: