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.