Simple jQuery Carousel Plugin With 3D Rotating Effects - Carousel 3D
File Size: | 22.5 KB |
---|---|
Views Total: | 16779 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.