Home

Awesome

react-carousel

Travis build status NPM version Canonical Code Style Twitter Follow

A carousel.

Markup

.react-carousel
  .react-carousel__navigation-button .react-carousel__navigation-button--previous
  ul
    li
  .react-carousel__navigation-button .react-carousel__navigation-button--next

Usage

Refer to demo for a complete setup.

<Carousel
  controlWidth={50}
  itemWidth={240}
  itemMargin={20}
>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</Carousel>

Demo

git clone https://github.com/gajus/react-carousel.git
cd ./react-carousel/demo
npm install
npm start

Behaviour

Properties


/**
 * Called when user clicks on an item.
 *
 * @typedef Carousel~onItemActivate
 * @property {String} Key prop of the item
 */

/**
 * Called when user clicks on buttons to scroll items (next or previous)
 *
 * @typedef Carousel~onItemScroll
 * @property {Number} index Index to scroll to
 */

/**
 * @property {Carousel~controlWidth} Width of the carousel navigation button.
 * @property {Carousel~firstVisibleIndex} Index to which the carousel is scrolled to (i.e the first index which is visible.) (default: `0`).
 * @property {Carousel~itemMargin} Margin between two items in the carousel.
 * @property {Carousel~itemWidth} Width of an item.
 * @property {Carousel~onItemActivate} Called when user clicks on an item.
 * @property {Carousel~onItemScroll} Called when user clicks on control buttons.
 * @property {Carousel~scrollStepDistance} Number of items to scroll at one time (default: the current visible item count).
 */