Refer to demo for a complete setup.
git clone https://github.com/gajus/react-carousel.gitcd ./react-carousel/demonpm installnpm start
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 change
propsthat you pass to it
Ideally, 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
itemWidthproperty value and
The carousel shrinks if the container width can't be filled with items.
onItemActivatewill be given the
keyof the item that is clicked by the user.
onItemScrollgets called when user clicks on next/ previous scroll button. It gives index of the new
/*** 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*/