jQuery circular carousel plugin

DirectCode | January 10, 2017 | 3D, Animation, CSS, Gallery, jQuery, Multimedia | No Comments

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

Usage

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>
</ul>

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

Ready!

There are methods available:

carousel.cycleActive('previous');
carousel.cycleActive('next');
carousel.cycleActiveTo(index);

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

Demo:

http://javascript-html5-tutorial.net/demos/jquery-circular-carousel/demo/

jQuery circular carousel plugin on GitHub:

https://github.com/sgb-io/jquery.circular-carousel