Skip to content

Latest commit

 

History

History
90 lines (54 loc) · 2.03 KB

Readme.md

File metadata and controls

90 lines (54 loc) · 2.03 KB
Raw

carousel

Another simple carousel/slideshow component

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

Installation

$ component install ericgj/carousel

Example

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

API

Carousel( els:NodeList|String, length )

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.

Carousel#length( n )

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

Carousel#width( n )

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

Carousel#next

Display next 'window' of elements

Carousel#prev

Display previous 'window' of elements

Carousel#autoplay( msecs )

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

Carousel#start

Start autoplay

Carousel#stop

Stop autoplay

Carousel#transition( css:String )

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

Notes

  • 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.

License

MIT