Simple jQuery Carousel Plugin With 3D Rotating Effects - Carousel 3D

Carousel3d is a jQuery & jQuery UI carousel plugin that makes use of CSS3 transforms and perspectives to cycle through a set of Html elements with an amazing 3D rotating effect.

Basic Usage:

1. Include the required jQuery & jQuery UI libraries at the end of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 

2. Include the jQuery carousel3D plugin after jQuery javascript library.

<script src="js/jquery-carousel3d-1.0.0.js"></script> 

3. Include the jQuery carousel3D plugin's stylesheet in the head section of the web page.

<link rel="stylesheet" href="css/carousel3d.css">

4. Markup html structure.

<ul id="demo">
<li class="page">
<div class="content">
<div class="step-number"></div>
</div>
</li>
<li class="page">
<div class="content">
<div class="step-number"></div>
</div>
</li>
<li class="page">
<div class="content">
<div class="step-number"></div>
</div>
</li>
<li class="page">
<div class="content">
<div class="step-number"></div>
</div>
</li>
<li class="page">
<div class="content">
<div class="step-number"></div>
</div>
</li>
<li class="page">
<div class="content">
<div class="step-number"></div>
</div>
</li>
</ul>

5. Call the plugin with default settings.

$('#demo').carousel3d();

6. All the optional settings to custom the 3D carousel.

$('#demo').carousel3d({
perspective: 500, // Specify carousel's perspective value.
duration: 1000, // Time of transition.
width: null, // Carousel width.
progress: true, // The flag for displaying indicator or not.
controller: true, // The flag for displaying contoroller or not.
prevText: 'prev', // Text for prev controller.
nextText: 'next' // Text for next controller.
});

Change log:

2016-05-17

• Fixed 1slide and 2slide bug

---

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