https://github.com/ericgj/carousel

Another simple carousel/slideshow component
https://github.com/ericgj/carousel

Last synced: 9 days ago
JSON representation

Another simple carousel/slideshow component

• Host: GitHub
• URL: https://github.com/ericgj/carousel
• Owner: ericgj
• Created: 2013-07-04T14:37:40.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-07-18T02:25:08.000Z (over 11 years ago)
• Last Synced: 2024-11-15T12:27:45.297Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 129 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# carousel

  Another simple carousel/slideshow component

  Note no swipe support is included (or planned). If you need a swipeable 

  carousel, use [component/swipe][swipe].

## Installation

    $ component install ericgj/carousel

## Example

```javascript

  

  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][animate] style transitions, check [test\index.html][test] 

  for an example. Note 'exit' transitions aren't currently supported by this

  carousel.

## License

  MIT

[swipe]: https://github.com/component/swipe

[test]:  https://github.com/ericgj/carousel/blob/master/test/index.html

[animate]: http://daneden.me/animate/