jQuery circular carousel plugin

3D rotating carousel solution with jQuery and CSS3. Try the jQuery circular carousel plugin!

jQuery circular carousel plugin 3D-like

jQuery Circular Carousel plugin is a jQuery plugin for creating a 3D cover flow-style content carousel using CSS3 transitions and transforms. A library that creates dynamic circular carousels. Requires jQuery. Adjustable items, dimensions, angle, durations, offsets. By default, scales non-active items to 0.5.

When this project is no longer in active development or support, it’s a nice, ready starting point for creating our own carousels easy.

Browser Support:

– IE10+ (for CSS3 Transitions and CSS3 Transforms – currently no polyfills or fallbacks implemented for IE9)
– Chrome
– FF
– Safari

jQuery circular carousel plugin demo
jQuery circular carousel plugin demo


Include jQuery, the plugin and the styles (css/jquery.circular-carousel.css).

Use an unordered list like so, with at least 4 items (you can choose the class names and put whatever you want inside the items):

<ul class="carousel">
    <li class="item active"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>

Setup the plugin, e.g.:

var options = {
    ovalWidth: 400,
    ovalHeight: 50,
    offsetX: 100,
    offsetY: 325,
    angle: 0,
    activeItem: 0,
    duration: 350,
    className: 'item'

var carousel = new CircularCarousel(options);


There are methods available:


And the events:

// Fires when an item is about to start it's activate animation
carousel.on('itemBeforeActive', function(e, item) {
    //do something with $(item)

// Fires after an item finishes it's activate animation 
carousel.on('itemActive', function(e, item) {
    //do something with $(item)

// Fires when an active item starts it's de-activate animation 
carousel.on('itemBeforeDeactivate', function(e, item) {
    //do something with $(item)

// Fires after an active item has finished it's de-activate animation 
carousel.on('itemAfterDeactivate', function(e, item) {
    //do something with $(item)

License: MIT



jQuery circular carousel plugin on GitHub:



See also:

Flip Carousel – a jQuery and CSS3 carousel plugin with flipping effects

jQuery Carousel-3D plugin – a cross browser 3D Carousel

Touch-friendly jQuery carousel plugin – microfiche.js

Javascript Image Slider – Non jQuery

jQuery 360 degree image viewer – Tikslus360