3D Cover Flow-Style Image Carousel Plugin with jQuery - Cloud 9 Carousel

Cloud 9 Carousel is a cool jQuery & Html5 based carousel plugin that has the ability to continuously rotate/slide a set of images with the familiar 3D 'cover flow' effect.

See also:

• jQuery Carousel Image Gallery with Cover-flow Effect - jqcarousel
• Cover-flow Effect with Image Reflection Effect Using jQuery and jQuery UI - qpcoverflow
• Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster

How to use it:

1. Include the jQuery javascipt library and jQuery cloud 9 carousel plugin at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.cloud9carousel.js"></script> 

2. Include the jQuery reflection.js to add instant reflection effects to your images. (Not required but recommended)

<script src="jquery.reflection.js"></script> 

3. Wrap the images in an DIV container.

<div id="showcase"> 
<img class="cloud9-item" src="1.png" alt="Alt">
<img class="cloud9-item" src="2.png" alt="Alt"> 
<img class="cloud9-item" src="3.png" alt="Alt"> 
</div>

4. Create an empty container to display the image caption specified in the alt attribute.

<p id="item-title">&nbsp;</p>

5. Create a navigation for the image carousel.

<div class="nav">
<button class="left">←</button>
<button class="right">→</button>
</div>

6. The sample CSS to style the image carousel.

#wrap {
/* fixed width, centered in viewport */
width: 980px;
left: -490px;
margin-left: 50%;
position: relative;
}
#showcase {
width: 100%;
height: 460px;
background: #16235e; /* Old browsers */
background: -moz-linear-gradient(top, #16235e 0%, #020223 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16235e), color-stop(100%, #020223)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, #16235e 0%, #020223 100%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(top, #16235e 0%, #020223 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #16235e 0%, #020223 100%); /* IE10+ */
background: linear-gradient(to bottom, #16235e 0%, #020223 100%); /* W3C */
-webkit-box-shadow: 0px 0px 13px 5px #DB1242;
-moz-box-shadow: 0px 0px 13px 5px #DB1242;
box-shadow: 0px 0px 13px 5px #DB1242;
border-radius: 8px;
margin-top: 12px;
visibility: hidden;
}
#showcase img {
cursor: pointer;
}
#item-title {
color: #F31414;
font-size: 29px;
letter-spacing: 0.13em;
text-shadow: 1px 1px 6px #C72B2B;
text-align: center;
margin-top: 30px;
margin-bottom: 22px;
}
.nav {
text-align: center;
}
.nav > button {
width: 64px;
height: 36px;
color: #666;
font: bold 16px arial;
text-decoration: none;
text-align: center;
margin: 5px;
text-shadow: 0px 1px 0px #f5f5f5;
background: #f6f6f6;
border: solid 2px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.nav > button:active, .nav > button.down {
background: #dfdfdf;
border: solid 2px rgba(0, 0, 0, 0.6);
box-shadow: none;
}

7. The javascript.

<script>
$(function() {
var showcase = $("#showcase")

showcase.Cloud9Carousel( {
yPos: 42,
yRadius: 48,
mirrorOptions: {
gap: 12,
height: 0.2
},
buttonLeft: $(".nav > .left"),
buttonRight: $(".nav > .right"),
autoPlay: true,
bringToFront: true,
onRendered: showcaseUpdated,
onLoaded: function() {
showcase.css( 'visibility', 'visible' )
showcase.css( 'display', 'none' )
showcase.fadeIn( 1500 )
}
} )

function showcaseUpdated( showcase ) {
var title = $('#item-title').html(
$(showcase.nearestItem()).attr( 'alt' )
)

var c = Math.cos((showcase.floatIndex() % 1) * 2 * Math.PI)
title.css('opacity', 0.5 + (0.5 * c))
}

// Simulate physical button click effect
$('.nav > button').click( function( e ) {
var b = $(e.target).addClass( 'down' )
setTimeout( function() { b.removeClass( 'down' ) }, 80 )
} )

$(document).keydown( function( e ) {

switch( e.keyCode ) {
/* left arrow */
case 37:
$('.nav > .left').click()
break

/* right arrow */
case 39:
$('.nav > .right').click()
}
} )
})
</script>

8. All the default options.

// null: calculated automatically
xOrigin: null,       
yOrigin: null,
xRadius: null,
yRadius: null,

// scale of the farthest item
farScale: 0.5,  

// enable CSS transforms      
transforms: true,   

// enable smooth animation via requestAnimationFrame()  
smooth: true,      

// fixed frames per second (if smooth animation is off)   
fps: 30,     

// positive number         
speed: 4,        

// [ 0: off | number of items (integer recommended, positive is clockwise) ]     
autoPlay: 0,   

// autoplay delay       
autoPlayDelay: 4000,

bringToFront: false,
itemClass: 'cloud9-item',
frontItemClass: null,
handle: 'carousel'

9. API methods.

// Spin the carousel
$("#carousel").data("carousel").go( Count );

// Spin the carousel to a specific item
$("#carousel").data("carousel").goTo( Index );

// Returns the 0-based index of the item nearest to the front (integer)
$("#carousel").data("carousel").nearestIndex();

// Returns a reference to the item object of the item that is nearest to the front (Item object)
$("#carousel").data("carousel").nearestItem();

// Returns the interpolated number of items rotated from the initial zero position. 
// In a carousel with 5 items that made three clockwise revolutions, the value will be -15. 
// If the carousel then further spins half-way to the next item, then the value would be -15.5 (float)
$("#carousel").data("carousel").itemsRotated();

// Returns an interpolated value of the item "index" at the front of the carousel. 
// If, for example, the carousel was 20% past item 2 toward the next item, then floatIndex() would return 2.2 (float)
$("#carousel").data("carousel").floatIndex();

// Disable the carousel (currently irreversible). 
$("#carousel").data("carousel").deactivate();

Change logs:

2017-11-22

• Added optional classname for automatically tagging the frontmost item

2016-11-30

• Added goTo(index) method.

2016-07-02

• Added onAnimationFinished() event

2015-03-04

• Made left/right button controls optional

2014-12-23

• Carousel item image properties preserved properly after mirroring

2014-04-26

• Carousel item image properties preserved properly after mirroring

2014-02-16

• CSS transforms detected and enabled by default

2014-02-14

• Removed redundant resizing code from Item.moveTo()
• Set smooth animation mode as default
• Removed redundant resizing code from Item.moveTo()

---

This awesome jQuery plugin is developed by specious. For more Advanced Usages, please check the demo page or visit the official website.