react-simply-carousel

A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable

Table of contents

• Installation
• Usage
• Props
• Demo

Installation

npm

npm install react-simply-carousel --save

yarn

yarn add react-simply-carousel

Usage

Basic Example:

import { useState } from 'react';
import ReactSimplyCarousel from 'react-simply-carousel';

function ReactSimplyCarouselExample() {
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);

  return (
    <div>
      <ReactSimplyCarousel
        activeSlideIndex={activeSlideIndex}
        onRequestChange={setActiveSlideIndex}
        itemsToShow={1}
        itemsToScroll={1}
        forwardBtnProps={{
          //here you can also pass className, or any other button element attributes
          style: {
            alignSelf: 'center',
            background: 'black',
            border: 'none',
            borderRadius: '50%',
            color: 'white',
            cursor: 'pointer',
            fontSize: '20px',
            height: 30,
            lineHeight: 1,
            textAlign: 'center',
            width: 30,
          },
          children: <span>{`>`}</span>,
        }}
        backwardBtnProps={{
          //here you can also pass className, or any other button element attributes
          style: {
            alignSelf: 'center',
            background: 'black',
            border: 'none',
            borderRadius: '50%',
            color: 'white',
            cursor: 'pointer',
            fontSize: '20px',
            height: 30,
            lineHeight: 1,
            textAlign: 'center',
            width: 30,
          },
          children: <span>{`<`}</span>,
        }}
        responsiveProps={[
          {
            itemsToShow: 2,
            itemsToScroll: 2,
            minWidth: 768,
          },
        ]}
        speed={400}
        easing="linear"
      >
        {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
        <div style={{ width: 300, height: 300, background: '#ff80ed' }}>
          slide 0
        </div>
        <div style={{ width: 300, height: 300, background: '#065535' }}>
          slide 1
        </div>
        <div style={{ width: 300, height: 300, background: '#000000' }}>
          slide 2
        </div>
        <div style={{ width: 300, height: 300, background: '#133337' }}>
          slide 3
        </div>
        <div style={{ width: 300, height: 300, background: '#ffc0cb' }}>
          slide 4
        </div>
        <div style={{ width: 300, height: 300, background: '#ffffff' }}>
          slide 5
        </div>
        <div style={{ width: 300, height: 300, background: '#ffe4e1' }}>
          slide 6
        </div>
        <div style={{ width: 300, height: 300, background: '#008080' }}>
          slide 7
        </div>
        <div style={{ width: 300, height: 300, background: '#ff0000' }}>
          slide 8
        </div>
        <div style={{ width: 300, height: 300, background: '#e6e6fa' }}>
          slide 9
        </div>
      </ReactSimplyCarousel>
    </div>
  );
}

export default ReactSimplyCarouselExample;

Props

| Name | Type | Default Value | Description | | ----------------------------------------------------------------- | ------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | activeSlideIndex | number | | Index of active slide | | activeSlideProps | object | {} | DOM props for active slide element | | autoplay | boolean | false | | | autoplayDirection | string ('forward' or 'backward') | 'forward' | | | backwardBtnProps | object | {} | DOM props for carousel backward nav button element (include boolean prop show (for toggle button render) and node prop children (for render button childrens)) | | children | node | null | slides array | | containerProps | object | {} | DOM props for carousel container div element | | delay | number | 0 | Slide change delay (css transition delay) in ms | | disableNavIfAllVisible | boolean | true | Disable carousel nav if all slides is visible | | easing | string | 'linear' | Slide change easing (css transition easing) | | forwardBtnProps | object | {} | DOM props for carousel forward nav button element (include boolean prop show (for toggle button render) and node prop children (for render button childrens)) | | hideNavIfAllVisible | boolean | true | Hide nav buttons if all slides is visible | | innerProps | object | {} | DOM props for inner div element | | itemsListProps | object | {} | DOM props for items list div element | | itemsToScroll | number | 1 | How many slides to scroll at once | | itemsToShow | number | 0 (automaticaly calculated) | How many slides to show | | onAfterChange | function | null | activeSlideIndex change callback | | onRequestChange | function | | Callback to handle every time the active slide changes, receives the new active index as first argument and info about visible slides ({ isFirstSlideVisible: boolean;isLastSlideVisible: boolean;visibleSlides: { slideIndex: number; isFullyVisible: boolean }[];}) as second. | | responsiveProps | Array of objects | [] | carousel props for different window width. For example: [{minWidth: 768, maxWidth: 992, itemsToShow: 3}, {maxWidth: 767, itemsToShow: 1}] will show only one slide when window width is less than 767px and show 3 slides when window width is >= 768px and < 992px | | speed | number | 0 | Carousel scroll speed (css transition speed) in ms | | updateOnItemClick | boolean | false | Update active item index after click on some slide | | centerMode (disabled if infinite prop disabled) | boolean | false | Align active slide to the center of the carousel container viewport | | infinite | boolean | true | Enable infinite loop scroll | | disableNavIfEdgeVisible (disabled if infinite prop enabled) | boolean | true | Disable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible | | disableNavIfEdgeActive | boolean | true | Disable carousel forward nav if activeSlideIndex === lastSlideIndex / Disable carousel backward nav if activeSlideIndex === 0 | | dotsNav (experimental) | object | {} | Props for carousel dots. Includes show (boolean) property for toggle dots nav visibility, containerProps (DOM Props for dots nav wrapper div) property, itemBtnProps (DOM props for all dots nav buttons) property and activeItemBtnProps (DOM props for active dots nav button) | | persistentChangeCallbacks | boolean | false | Enable call onRequestChange prop even if activeSlideIndex equals new value | | showSlidesBeforeInit (deprecated) | boolean | true | Show slides on very first (initial) carousel render | | visibleSlideProps | object | {} | DOM props for visible slide element | | autoplayDelay | number | 0 | after what period of time the auto-update function of the active slide will be launched | | preventScrollOnSwipe | boolean | false | prevent vertical scroll on swipe | | disableSwipeByMouse | boolean | false | disable swipe by mouse | | disableSwipeByTouch | boolean | false | disable swipe by touch | | swipeTreshold | number | half width of the active slide | minimum swipe distance in px (by touch or by mouse drag) for change slide | | touchSwipeTreshold | number | half width of the active slide | minimum swipe distance in px (by touch) for change slide | | mouseSwipeTreshold | number | half width of the active slide | minimum swipe distance in px (by mouse drag) for change slide | | swipeRatio | number | 1 | swipe distance ratio (on swipe by touchmove or by mouse drag) | | touchSwipeRatio | number | swipeRatio prop value | swipe distance ratio (on swipe by touchmove) | | mouseSwipeRatio | number | swipeRatio prop value | swipe distance ratio (on swipe by mouse drag) | | dirRTL | boolean | false | Enable support for right-to-left slides content (text) direction |

Demo