Another simple carousel/slideshow component

Note no swipe support is included (or planned). If you need a swipeable carousel, use component/swipe.

$ component install ericgj/carousel

  
  var carousel = require('carousel')('#root > .item')
  carousel.autoplay(6000);
  carousel.width(4);
  carousel.transition('animated bounce-in-left');
  window.onload = function(){
    carousel.start();
  }

Construct a carousel of given elements, or using given selector query. Optionally specify a maximum length of elements, otherwise it will cycle through all given/selected elements.

Limit of total elements in carousel. Defaults to all given/selected elements.

Set width of carousel 'window' (i.e., how many elements shown each cycle). Defaults to 1.

Display next 'window' of elements

Display previous 'window' of elements

Define the duration each element 'window' is displayed before advancing to next, in milliseconds.

Start autoplay

Stop autoplay

CSS class(es) to be added to elements as they are shown. Defaults to 'transition'.

• This carousel does not currently rearrange elements but only shows/hides them. Because of this, if your cycle width is not a factor of the total length of elements, you may see elements 'out of order' when they cycle around to the beginning.

• You should add .hide { display: none; } for hiding inactive elements.

• For animate.css style transitions, check test\index.html for an example. Note 'exit' transitions aren't currently supported by this carousel.

MIT