3D Rotating Carousel Plugin with jQuery and CSS3 - Circular Carousel

Circular Carousel is a jQuery plugin for creating a 3D cover flow-style content carousel using CSS3 transitions and transforms.

See also:

• jQuery Carousel Image Gallery with Cover-flow Effect - jqcarousel
• 3D Cover Flow-Style Image Carousel Plugin with jQuery - Cloud 9 Carousel
• 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. Load the required jquery.circular-carousel.css in the head section of the web page.

<link rel="stylesheet" href="jquery.circular-carousel.css">

2. Load the jQuery javascript library and the jQuery circular carousel plugin in the footer.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="query.circular-carousel.js"></script> 

3. Create the Html for a content carousel using Html unordered list.

<ul class="carousel">
  <li class="item active"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  ...
</ul>

4. You can also create some controls to rotate the carousel manually.

<div class="controls">
 <a href="#" class="previous">Previous</a> 
 <a href="#" class="next">Next</a>
</div>

5. The Javascript to enable the carousel.

$('.carousel').CircularCarousel(options);

6. The Javascript to enable the controls.

$('.controls .previous').click(function(e) {
carousel.cycleActive('previous');
e.preventDefault();
});

/* Next button */
$('.controls .next').click(function(e) {
carousel.cycleActive('next');
e.preventDefault();
});

6. Available options.

ovalWidth: 400,
ovalHeight: 50,
offsetX: 100, // the left offset of all points on the ellipse
offsetY: 325, // the top offset of all points on the ellipse
angle: 0, // the angle of the ellipse
activeItem: 0, // used to influence which element is considered active
duration: 350,
className: 'item'

---

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