react-carousel
A carousel.
Markup
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.gitcd ./react-carousel/demonpm installnpm start
Behaviour
-
The component does very little by itself. You provide it the input with
props
, and it renders it. To make any changes (like change active item, scroll items), you need to changeprops
that you pass to itIdeally, you keep state in a (redux) store, and pass that state as props to this component. The callbacks are used to manipulate the store which shall eventually change the props passed, and render the component.
-
The component will show scroll buttons (two buttons; one in front of the carousel and one at the end) if number of items in the carousel exceed the total number of items that can be displayed without overflowing the contents.
-
The total number of items that can be displayed in the carousel is determined using the width of the component container, the
itemWidth
property value anditemMargin
property value. -
The carousel shrinks if the container width can't be filled with items.
-
onItemActivate
will be given thekey
of the item that is clicked by the user. -
onItemScroll
gets called when user clicks on next/ previous scroll button. It gives index of the newfirstVisibleIndex
item.
Properties
/** * Called when user clicks on an item. * * @typedef Carousel~onItemActivate * @property */ /** * Called when user clicks on buttons to scroll items (next or previous) * * @typedef Carousel~onItemScroll * @property */ /** * @property * @property * @property * @property * @property * @property * @property */