Home > Web Development > 55 Best jQuery Carousel Plugins

55 Best jQuery Carousel Plugins

jquery-carousel

In web design a jQuery carousel is an element giving visitors easy and visible access to several content items. It is typically a dynamic scrolling list of items in horizontal order where previous and next items are partially visible. The items, consisting of HTML content, images, videos etc. can be scrolled back and forth (with or without animated transitions).

Using sliding horizontal panels, known as Carousels and jQuery 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 a jQuery image slider plugin to a web site. There are many great  jQuery carousel plugins available today, and it is quite difficult to choose the best. This article has been created specifically to help you get started using jQuery Carousels, but you may also jQuery Slider plugins. This article was recently updated with new jQuery carousel plugins and all link where checked.

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.


ElegantThemes
Hostgatorhttp://envato.s3.amazonaws.com/referrer_adverts/tf_260x120_v2.gif
ThemeForest

Advertisement

jQuery Carousel Plugin collection

JCoverflip – MORE INFO / DEMO

image

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

All in one jQuery Banner Rotator / Carousel – MORE INFO | DEMO

responsivejqueryslider2

All in one banner rotator is powerful jQuery plugin that you can be configured to act as Banner Rotator, Thumbnails Banner, Banner with Playlist, Content Slider and Carousel. It is responsive as will adapt to fit mobile screens.

Slider Revolution Responsive jQuery Plugin – MORE INFO / DEMO

slider-revolution-responsive-jquery-plugin

Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS !

Layer Slider – MORE INFO / DEMO

LAYERSLIDER

This is a jQuery content slider using the famous parallax-effect! You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

Galleria – MORE INFO / DEMO

image

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. Galleria is prepared for responsive environments and reacts to dynamic measures and media queries using simple options.

3D Carousel – Advanced jQuery Carousel – MORE INFO / DEMO

3d-carousel

3D Carousel is a powerful jQuery plugin that allows you to arrange a set of images in a carousel layout.

jQuery Carousel Evolution – MORE INFO / DEMO

jquery-carousel-evolution

jQuery Carousel Evolution is a jQuery plugin that allows you to easily create powerfull carousel slider using HTML markup. The plugin also provides an easy to use API which will allow to further enhance the functionality of the carousel. Great for screenshoot slider.

Cloud Carousel – MORE INFO / DEMO

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.

Advanced Slider – jQuery XML slider – MORE INFO / DEMO

advanced-slider-jquery-xml-slider

Advanced Slider is fully responsive, mobile-ready, SEO -friendly, and offers you the option to use either HTML markup or XML . The plugin also provides an easy to use API which will allow you to further enhance the functionality of the slider and will make it possible to integrate it into your own application. Please take a look at the list of features below.

jQuery Timeline Slider – MORE INFO / DEMO

timeline-slider

Timeline Slider is a really cool plugin to build your history timelines. Its main configuration can be easily customized due to its compact config parameters, directly from the html file. Also more configurations can be edited through the css style sheet file. It comes with 2 skins, Dark, Light, to make easy the integration on your web project. The powerful jQuery library makes this component cross-platform.

JSized Carousel – MORE INFO / DEMO

jsized-carousel

JSized Carousel is a jQuery plugin that converts a list of images into a nice image gallery. The layout and animation is a bit different from what you see in other plugins and it makes it worth cheking out.

BX Slider – MORE INFO / DEMO

55m4

jQuery HTML Content Slider with horizontal, vertical, and fade transitions

Estro – jQuery Ken Burns & swipe effect slider – MORE INFO / DEMO

estro-jquery-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.

RoundAbout for jQuery – cool jQuery Carousel – MORE INFO / DEMO

RoundAbout for jQuery

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area.

jQuery Banner Rotator / Slideshow – MORE INFO / DEMO

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.

Wow Slider – MORE INFO / DEMO

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.

iCarousel™ – MORE INFO / DEMO

icarousel

iCarousel is a powerful mobile-friendly and lightweight jQuery plugin that allows you to arrange a set of images in a carousel layout. The plugin also provides an easy to use API which will allow to further enhance the functionality of the carousel. Great for screenshoot slider.

Boutique carousel – MORE INFO / DEMO

boutique-carousel

A ready to use jQuery slider/carousel to present your images in a unique, smooth and customizable way.

Simply link to the JavaScript and CSS files and apply it to your HTML element like other jQuery plugins. Customize the settings and CSS to match your style and purpose. Full documentation and examples included.

Carou Fredsel – MORE INFO / DEMO

55m19

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it’s responsive too.

Showbiz Business Carousel jQuery Plugin – MORE INFO / DEMO

showbiz-carousel-jquery-plugin

This is a highly customizable plugin to show you or your customer’s services, portfolio items, blog contents… basically all business information thinkable.

AVIA Slider – MORE INFO / DEMO

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.

Barousel – MORE INFO / DEMO

Barousel is a jQuery plugin

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

Elegant carousel – MORE INFO / DEMO

elegant-carousel

Elegant carousel is a carousel slider with two different effects. You can also choose between 2 orientation.
You can adapt the carousel slider verry easily to your needs with the css.

Anything Slider – MORE INFO / DEMO

anything slider

AnythingSlider panels are HTML Content (can be anything). Multiple AnythingSliders allowable per-page… and much more

Sexy Slider – MORE INFO / DEMO

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!

Dual slider – MORE INFO / DEMO

55m25

With this slider pretty much any html can go in the panels from your CMS. There is a cool sliding transition and caption effects.

Liquid Carousel – MORE INFO / DEMO

55m27

Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.

PhotoStore Minimal Carousel – MORE INFO / DEMO

minimal-carousel

PhotoStore Minimal Carousel has been constructed in accordance with the Usability and Accesibility, with very little use of javascript.

Agile jQuery Carousel – MORE INFO / DEMO

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.

jCarousel – MORE INFO / DEMO

55m2

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

Feature jQuery carousel – MORE INFO / DEMO

55m28

This plug-in was intended to be used to display feature stories on a home page of a website, but can be used for any reason and is highly customizable. It will always display three images at the same time, with all the rest hidden behind the center image. I have detailed instructions for using the plug-in, as well as a list of all the options and some frequent questions. If you have any questions about the carousel, please post a comment below.

slides – MORE INFO / DEMO

Slides is a slideshow plugin for jQuery

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.

Carousel Slideshow – MORE INFO / DEMO

55m14

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

3d Rotation Viewer – MORE INFO / DEMO

image

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.

Full Page Image Gallery with jQuery – MORE INFO / DEMO

image

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.

HTML5 Slideshow w/ Canvas and jQuery – MORE INFO / DEMO

image

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

Icarousel – MORE INFO / DEMO

iCarousel - Horizontal images slider

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

Factory Galleries – MORE INFO / DEMO

FACTORY GALLERIES

You can create all Galleries you want with elegance and style. The sliding wffect for both images and text is pretty cool.

Making an infinite JQuery carousel – MORE INFO / DEMO

Making an infinite JQuery carousel

In this tutorial we will make an infinite JQuery carousel. Many tutorials on how to make an infinite JQuery carousel are quite complex, so this is an attemot to show you how to make it much simpler.

Rcarousel – MORE INFO / DEMO

jquey carousel, Rcarousel

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

Supersized jQuery plugin – MORE INFO / DEMO

image

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 – MORE INFO / DEMO

step jquey carousel

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 – MORE INFO / DEMO

image

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 – Fullscreen Gallery – MORE INFO / DEMO

image

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

Nivo Slider MORE INFO / DEMO

image

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

jQuery popeye 2.0 – MORE INFO / DEMO

image

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.

jQuery Infinite Carousel Plugin – MORE INFO / DEMO

infinite-carousel

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.

jMyCarousel – MORE INFO / DEMO

jquey carousel, 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.

Roundabout Shapes – MORE INFO / DEMO

55m10

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

Moodular jQuery Carousel – MORE INFO / DEMO

jquery-carousel[3]

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 – MORE INFO / DEMO

image

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.

Coin Slider – MORE INFO / DEMO

image

This jQuery slider features smooth transition (slice images in squares) effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

jQuery Ms Carousel – MORE INFO / DEMO

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.

Theatre Carousel – MORE INFO / DEMO

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.

Making Mosiac Slideshow with jQuery and CSS – MORE INFO / DEMO

Making Mosiac Slideshow with jQuery and CSS

In this tutorial you will be making a jQuery & CSS mosaic gallery – it is also available as download. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

jDigiclock slider – MORE INFO / DEMO

55m24

 jQuery Carousel plugin – MORE INFO / DEMO

jQuery Carousel plugin

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

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.

, , , , , , , ,

TOP
Visit Us On TwitterVisit Us On FacebookVisit Us On Google PlusVisit Us On Linkedin