A timed infinite carousel that uses vanilla JavaScript & CSS animations.
JavaScript HTML Makefile CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 60fb058 Mar 20, 2015
Permalink
Failed to load latest commit information.
css 0.1.0 Mar 20, 2015
dist 0.1.0 Mar 20, 2015
js 0.1.0 Mar 20, 2015
test added first qunit test Mar 19, 2015
.gitignore initial commit Mar 11, 2015
.jshintrc initial commit Mar 11, 2015
LICENSE.txt initial commit Mar 11, 2015
Makefile renamed test to lint Mar 20, 2015
README.md added first qunit test Mar 19, 2015
package.json 0.1.0 Mar 20, 2015

README.md

Infinite Carousel

Timed infinite carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. It's useful if you need a UI element to continuously scroll (ex: ticker being displayed on a TV monitor).

Docs and demos.

Install

Download

CSS

JavaScript

Markup

Infinite Carousel works with a container element and a set of child item elements.

<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 (v41+)
  • Firefox (v36+)
  • Opera (v27+)
  • Safari (v8+)

License

Infinite Carousel is released under the MIT license.