Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sgb-io/jquery.circular-carousel
[ABANDONED] A 3D-like circular carousel plugin for jQuery.
https://github.com/sgb-io/jquery.circular-carousel
carousel carousel-component carousels javascript jquery
Last synced: about 21 hours ago
JSON representation
[ABANDONED] A 3D-like circular carousel plugin for jQuery.
- Host: GitHub
- URL: https://github.com/sgb-io/jquery.circular-carousel
- Owner: sgb-io
- Created: 2014-06-26T11:51:01.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-10-20T08:27:31.000Z (over 9 years ago)
- Last Synced: 2024-05-01T23:37:07.101Z (9 months ago)
- Topics: carousel, carousel-component, carousels, javascript, jquery
- Language: JavaScript
- Homepage:
- Size: 271 KB
- Stars: 52
- Watchers: 3
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://sgb-io.github.io/jquery.circular-carousel/demo/).
# 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):
```html
```
Include jQuery, then download & include the library.
```html
```
Include (or integrate) the library styles.
```html
```
Then, in your application.
```javascript
var options = {
ovalWidth: 400,
ovalHeight: 50,
offsetX: 100,
offsetY: 325,
angle: 0,
activeItem: 0,
duration: 350,
className: 'item'
}
var carousel = new CircularCarousel( options );
```
Methods:
```javascript
carousel.cycleActive('previous');
carousel.cycleActive('next');
carousel.cycleActiveTo(index);
```
Events:
```javascript
/* 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.