Skip to content
A timed infinite carousel that uses vanilla JavaScript & CSS animations.
JavaScript HTML Makefile CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
dist
js
test
.gitignore
.jshintrc
LICENSE.txt
Makefile
README.md
package.json

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.

You can’t perform that action at this time.