kareemaly/ react-items-carousel
About the developer
176 Stars 
44 Forks 
MIT License 
129 Commits 
3 Opened issues 
Description
Items Carousel Built with react-motion and styled-components
Services available
Contributors list
react-items-carousel
Installation
$ npm install react-items-carousel --save
Demos
Example
import React, { useState } from 'react';
import ItemsCarousel from 'react-items-carousel';
export default () => {
const [activeItemIndex, setActiveItemIndex] = useState(0);
const chevronWidth = 40;
return (
{'}
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
placeholderItemuntil children are passed. | | placeholderItem | node | null | If
enablePlaceholderis true, this will be rendered until children are passed. | | numberOfPlaceholderItems | number | 0 | This controls how many
placeholderItemto render if
enablePlaceholderis 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
infiniteLoopwas set to true, the following props are ignored -
activePosition: will always be
left-
alwaysShowChevrons: will always be
true
Contributing
To contribute, follow these steps: - Fork this repo. - Clone your fork. - Run
yarn- Run
yarn start:gh- Goto
localhost:9000- Add your patch then push to your fork and submit a pull request
License
MIT