Need help with react-items-carousel?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kareemaly
176 Stars 44 Forks MIT License 129 Commits 3 Opened issues

Description

Items Carousel Built with react-motion and styled-components

Services available

!
?

Need anything else?

Contributors list

# 209,301
Node.js
CSS
puppete...
HTML
99 commits
# 291,770
React
Node.js
HTML
CSS
1 commit
# 579,196
reactna...
TypeScr...
HTML
reactjs
1 commit

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

placeholderItem
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
-
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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.