Maintained React Items Carousel
npm install react-items-carousel-3react-items-carousel
---------------
This is a fork of [react-items-carousel] with the following changes:
- Security updates
- Upgrade to version 18.3.0 of react
- Updated dependencies
$ npm install react-items-carousel-3 --save
Demos
Example
javascript
import React, { useState } from 'react';
import ItemsCarousel from 'react-items-carousel-3';export default () => {
const [activeItemIndex, setActiveItemIndex] = useState(0);
const chevronWidth = 40;
return (
0 ${chevronWidth}px }}>
activeItemIndex={activeItemIndex}
numberOfCards={2}
gutter={20}
leftChevron={}
rightChevron={}
outsideChevron
chevronWidth={chevronWidth}
>
First card
Second card
Third card
Fourth card
);
};
`Component Props
| Property | Type | Default | Description |
|--------------------------|----------------------------------|---------|---------------------------------------------------------------------------------------|
| children * | node[] | | The cards to render in the carousel. You must specify a height for each card. |
| requestToChangeActive * | function | | This function accepts the new activeItemIndex and should update your component state. |
| activeItemIndex * | int | | This defines which item should be active. |
| numberOfCards | number | 3 | Number of cards to show per slide. |
| infiniteLoop | boolean | false | Enable infinite loop. see Infinite loop limitations |
| gutter | number | 0 | Space between cards. |
| showSlither | boolean | false | If true a slither of next card will be shown. |
| firstAndLastGutter | boolean | false | If true first and last cards will have twice the space. |
| enablePlaceholder | boolean | false | If true, component will render
until children are passed. |
| placeholderItem | node | null | If enablePlaceholder is true, this will be rendered until children are passed. |
| numberOfPlaceholderItems | number | 0 | This controls how many placeholderItem to render if enablePlaceholder is true. |
| activePosition | enum ('left', 'center', 'right') | left | The position of the active item. |
| rightChevron | node | null | Right chevron node. |
| leftChevron | node | null | Left chevron node. |
| chevronWidth | number | 0 | This value should be the width of left and right chevron. |
| outsideChevron | boolean | false | If true the chevron will be rendered outside the carousel. |
| alwaysShowChevrons | boolean | false | If true the chevrons will always be visible even if there were no cards to scroll. |
| slidesToScroll | number | 1 | Number of cards to scroll when right and left chevrons are clicked. |
| disableSwipe | boolean | false | Disables left and right swiping on touch devices. |
| onStateChange | func | null | This function will be called when state change with { isFirstScroll: Boolean, isLastScroll: Boolean }. It can be used to fetch more data for example. |
| classes | { wrapper: string, itemsWrapper: string, itemsInnerWrapper: string, itemWrapper: string, rightChevronWrapper: string, leftChevronWrapper: string } | {} | An object of classes to pass to the carousel inner elements |
Infinite Loop Limitations
If infiniteLoop was set to true, the following props are ignored
- activePosition: will always be left
- : will always be trueContributing
To contribute, follow these steps:
- Fork this repo.
- Clone your fork.
- Run
- Run
- Goto