Popularity
1.8
Growing
Activity
7.9
Growing
76
2
6

Description

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

Programming language: TypeScript
License: MIT License

react-simply-carousel alternatives and similar libraries

Based on the "Carousel" category.
Alternatively, view react-simply-carousel alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-simply-carousel or a related project?

Add another 'Carousel' Library

README

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

Demo

Edit react-simply-carousel-demo


*Note that all licence references and agreements mentioned in the react-simply-carousel README section above are relevant to that project's source code only.