React Items Carousel

Usage no npm install needed!

<script type="module">
  import reactItemsCarousel from '';




$ npm install react-items-carousel --save



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` }}>
        <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>

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


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