Demos
Download
CSS
JavaScript
Usage
Infinite Carousel works with a container element and a set of child item elements.
Markup
<div class="infinite-carousel-shell">
<div id="container" class="infinite-carousel-group">
<div class="infinite-carousel-group-item">1</div>
<div class="infinite-carousel-group-item">2</div>
<div class="infinite-carousel-group-item">3</div>
<div class="infinite-carousel-group-item">4</div>
</div>
</div>
JavaScript
/**
* Required arguments are:
* - a container element (string)
* - a direction ('horizontal' or 'vertical')
* - the number of items that are visible at once
*/
var infinitecarousel = new InfiniteCarousel('#container', 'horizontal', 3, {
// optional options object (defaults are listed)
timerDuration: 2000,
// set time between advances in milliseconds
transitionDuration: '1s'
// the duration of the animation
});
Browser Support
Tested in the latest versions of:
- Chrome
- Firefox
- Opera
- Safari
License
Infinite Carousel is released under the MIT license.