🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Carousel cover-flow 3D

Documentation

jQuery Circular Carousel

A library that creates dynamic circular carousels. Requires jQuery. Adjustable items, dimensions, angle, durations, offsets. By default, scales non-active items to 0.5. See the demo.

What it looks like.

Status of this project

This project is no longer in active development or supported, but please feel free to use it however you wish. Patches welcome.

Browser Support

Uses CSS3 Transitions, CSS3 Transforms. Currently no polyfills or fallbacks implemented for IE9.

  • IE10+
  • Chrome
  • FF
  • Safari

Usage

Use an unordered list like so, with at least 4 items (you can choose the class names and put whatever you want inside the items):

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

Include jQuery, then download & include the library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.circular-carousel.js"></script>

Include (or integrate) the library styles.

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

Then, in your application.

var options = { 	ovalWidth: 400, 	ovalHeight: 50, 	offsetX: 100, 	offsetY: 325, 	angle: 0, 	activeItem: 0, 	duration: 350, 	className: 'item' } var carousel = new CircularCarousel( options );

Methods:

carousel.cycleActive('previous'); carousel.cycleActive('next'); carousel.cycleActiveTo(index);

Events:

/* Fires when an item is about to start it's activate animation */ carousel.on('itemBeforeActive', function(e, item) { 	//do something with $(item) });  /* Fires after an item finishes it's activate animation */ carousel.on('itemActive', function(e, item) { 	//do something with $(item) });  /* Fires when an active item starts it's de-activate animation */ carousel.on('itemBeforeDeactivate', function(e, item) { 	//do something with $(item) })  /* Fires after an active item has finished it's de-activate animation */ carousel.on('itemAfterDeactivate', function(e, item) { 	//do something with $(item) })

License

MIT

Thanks

Addy Osmani for creating a useful method for mapping DOM elements to a shape. Marcus Haslam (@marcusehaslam) for helping to create the findBestRoute utility.


You May Also Like