jQuery Carousel Plugins

Feb 11, 2010 View Comments by Azraar

Carousels are handy if you have a row images and want your visitors to access them  in solid and really beautiful way. With jQuery opportunities this feature is made very simple and good-looking. In this post you’re going to find different types of premade carousel plugins and tutorials how to make your own unique carousel gallery whenever you wish, find also some little inspiration at the end of article as bonus

1. jCarousel

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). Check out 15+ examples, tutorial how to set it up and all configuration options. Works with all major browsers. Here’s the circular dynamic carousel example.

Jcarousel-jquery-carousel-plugins-resources-tutorials-examples

2. jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. jCarousel Lite is not a replacement for jCarousel; rather it is a light-weight (only 2kb) alternative for users whose primary focus is not to build a full-blown image gallery.

Lite-jquery-carousel-plugins-resources-tutorials-examples

3. Agile Carousel

Agile Carousel is a JQuery plugin that lets you create a carousel with flexible settings. Some cool features:

  • Ability to show multiple slides
  • Ability to show intro slide
  • Ability to Disable “First” and “Last” buttons at beginning & end of carousel

Here’s an example with intro slide.

Agile-beta--jquery-carousel-plugins-resources-tutorials-examples

4. jQuery Carrousel

The core allows to create your own controls or effects. This plugin transforms and tags into an animated carousel.

Js-jquery-carousel-plugins-resources-tutorials-examples

5. jQuery Infinite Carousel Plugin

jQuery carousel plugin where small image thumbnails allow users to jump over to other images.

Features:

  • Carousel never ends and images shuffle around
  • Captions are optional
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence
  • Thumbnails can be styled via CSS
  • It’s less than 14K
  • Reusable on multiple containers within the same page

Infinite-jquery-carousel-plugins-resources-tutorials-examples

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

Step-viewer-jquery-carousel-plugins-resources-tutorials-examples

7. Just Another Carousel

A jQuery content carousel that works with any size content and supports mouse input. Features:

  • Works in FF3, IE7, Opera, and Safari.
  • Supports fixed-size or variable-size children
  • Supports the Meta plugin for jQuery
  • Totally CSS-based allowing for high customization
  • Degrades gracefully into an unordered list

Just-another-jquery-carousel-plugins-resources-tutorials-examples

8. LoopedCarousel

LoopedCarousel is a plugin made for jQuery that is not only a looping carousel, its main goal is to be extremely easy to implement. No more messing around with CSS to get your carousel to look and function properly. You want to show 5 items? Tell it “items: 5″ and so.

Looped-jquery-carousel-plugins-resources-tutorials-examples

9. jQuery Carousel

Great looking plugin with various types of use.

Great-jquery-carousel-plugins-resources-tutorials-examples

10. Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with a set of nested elements.

Roundabout-jquery-carousel-plugins-resources-tutorials-examples

11. How to Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

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

12. jQuery Carousel Gallery for WordPress

This plugin builds on the built-in WordPress gallery, and replaces any gallery inserted using the

tag with a neat jQuery powered carousel.

Gallery-for-wordpress-jquery-carousel-plugins-resources-tutorials-examples

13. Making an infinite JQuery carousel

In this tutorial you will make an infinite JQuery carousel. The infinite effect will be made by changing position of the items, when the user clicks right(next) the first item will be placed after the last item and when he clicks left(previous) the last item will be placed before the first item. You can check out the demo.

Making-infinite-jquery-carousel-plugins-resources-tutorials-examples

14. jQuery Infinite Carousel

Screencast how to create infinite jQuery carousel. Step by step written tutorial also available. Check out the demo and access code.

Screencast-tutorial-jquery-carousel-plugins-resources-tutorials-examples

Examples

Branded07

Branded-07-jquery-carousel-plugins-resources-tutorials-examples

Aaron Hall Portfolio

Aaron-hall-portfolio-jquery-carousel-plugins-resources-tutorials-examples

Corny

Corny-jquery-carousel-plugins-resources-tutorials-examples

Mkg Studio

Mkg-studio-jquery-carousel-plugins-resources-tutorials-examples

Deluge Studios

Deluge-studios-jquery-carousel-plugins-resources-tutorials-examples

Golf Working

Golf-working-jquery-carousel-plugins-resources-tutorials-examples

Dazzle Cat

Dazzle-cat-jquery-carousel-plugins-resources-tutorials-examples

What Is XV

What-is-xv-jquery-carousel-plugins-resources-tutorials-examples

Bret Glassett

Bret-glassett-jquery-carousel-plugins-resources-tutorials-examples

Chris Kaufman Portfolio

Chris-kaufman-portfolio-portfolio-jquery-carousel-plugins-resources-tutorials-examples

Processing your request, Please wait....
Tutorials

About the author

Azraar Azward, is a aged 20 front-end & back-end web designer and a developer in Colombo. Presently works as the moderator of Webmaster Technologies. He is an Undergraduate of BSc. Hons. in IT at Sri Lanka Institute of Information Technology.If you would like to connect with him, follow him on Twitter here and check his website at Azraar.com