[ABANDONED] A 3D-like circular carousel plugin for jQuery.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo Add screenshot, update readme Jun 26, 2014
README.md A note on support Oct 20, 2015
jquery.circular-carousel.css Imported from svn Jun 26, 2014
jquery.circular-carousel.js More linting Jun 26, 2014

README.md

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.