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

Looking for a cross browser 3D Carousel? Try the jQuery Carousel-3D plugin!

A cross browser 3D Carousel plugin

This plugin is a true cross browser 3D Carousel, that supports all major browsers including IE8, 9 and mobile. A simple 3D carousel widget, which works with not only images but any HTML elements as child!

Please note, that full 3D effect requires browsers with CSS Transform 3D support.

A cross browser 3D Carousel jQuery plugin
A cross browser 3D Carousel jQuery plugin

Installation

Via bower:

bower install carousel-3d

Dependencies of the plugin: jQuery, javascript-detect-element-resize, Modernizr, waitForImages.

You will need to include those scripts before carousel-3d.js in HTML page, or load it using requirejs / browserify.

There is a simple API:

Rotate carousel prev / next:

$('#myCarousel').Carousel3d('prev');
$('#myCarousel').Carousel3d('next');

Rotate carousel by index:

$('#myCarousel').Carousel3d('rotate', 3);

Handler / event listener:

$('#myCarousel').on('select', function (evt, index) {
    console.log('item selected : ' + index);
});

License: MIT

Demo:

http://paio-co-kr.github.io/carousel-3d

GitHub:

https://github.com/PAIO-CO-KR/carousel-3d

You may also like:

3D Flipping Gallery with jQuery and CSS3 – tutorial and example

Tutorial: An introduction to CSS 3D transforms

Creating 3D rotatable objects with jQuery Interactive 3D plugin

Touch-friendly jQuery carousel plugin – microfiche.js

Enjoy!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1