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 (
    <div style={{ padding: `0 ${chevronWidth}px` }}>
      <ItemsCarousel
        requestToChangeActive={setActiveItemIndex}
        activeItemIndex={activeItemIndex}
        numberOfCards={2}
        gutter={20}
        leftChevron={<button>{'<'}</button>}
        rightChevron={<button>{'>'}</button>}
        outsideChevron
        chevronWidth={chevronWidth}
      >
        <div style={{ height: 200, background: '#EEE' }}>First card</div>
        <div style={{ height: 200, background: '#EEE' }}>Second card</div>
        <div style={{ height: 200, background: '#EEE' }}>Third card</div>
        <div style={{ height: 200, background: '#EEE' }}>Fourth card</div>
      </ItemsCarousel>
    </div>
  );
};

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