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

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
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
Enjoy!