Skip to content
master
Switch branches/tags
Code

react-simply-carousel

npm version minified + gzip typescript GitHub license

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

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 arguments.
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) (disabled if infinite prop enabled) object {} Props for carousel dots. includes show (boolean) for toggle dots nav visibility, activeClassName (className for active dot) and DOM props for all dots nav buttons
dotsNavWrapperProps object {} DOM Props for dots nav wrapper div

Demo

Edit react-simply-carousel-demo