carousel

A Simple multifunctional controlled react.js carousel component

Sep 02, 2021
A Simple multifunctional controlled react.js carousel component

react-simply-carousel

Simple multifunctional controlled react.js carousel component. Touch enabled, responsive, infinite, with autoplay support. (with ssr support)

View Demo View Github

Installation

npm

npm install react-simply-carousel --save

yarn

yarn add react-simply-carousel

Usage

Basic Example:

import React, { Component } from "react"; import Carousel from "react-simply-carousel"; class App extends Component { state = { activeSlideIndex: 0, }; setActiveSlideIndex = (newActiveSlideIndex) => { this.setState({ activeSlideIndex: newActiveSlideIndex, }); }; render() { return ( <Carousel activeSlideIndex={this.state.activeSlideIndex} onRequestChange={this.setActiveSlideIndex} itemsToShow={3} itemsToScroll={3} > <div style={{ width: 300, height: 300 }}>slide 0</div> <div style={{ width: 300, height: 300 }}>slide 1</div> <div style={{ width: 300, height: 300 }}>slide 2</div> <div style={{ width: 300, height: 300 }}>slide 3</div> <div style={{ width: 300, height: 300 }}>slide 4</div> <div style={{ width: 300, height: 300 }}>slide 5</div> <div style={{ width: 300, height: 300 }}>slide 6</div> <div style={{ width: 300, height: 300 }}>slide 7</div> <div style={{ width: 300, height: 300 }}>slide 8</div> <div style={{ width: 300, height: 300 }}>slide 9</div> </Carousel> ); } }

Props

NameTypeDefault ValueDescription
activeSlideIndexnumberIndex of active slide
activeSlidePropsobject{}DOM props for active slide element
autoplaybooleanfalse
autoplayDirectionstring ('forward' or 'backward')'forward'
backwardBtnPropsobject{}DOM props for carousel backward nav button element (include boolean prop show (for toggle button render) and node prop children (for render button childrens))
childrennodenullslides array
containerPropsobject{}DOM props for carousel container div element
delaynumber0Slide change delay (css transition delay) in ms
disableNavIfAllVisiblebooleantrueDisable carousel nav if all slides is visible
easingstring'linear'Slide change easing (css transition easing)
forwardBtnPropsobject{}DOM props for carousel forward nav button element (include boolean prop show (for toggle button render) and node prop children (for render button childrens))
hideNavIfAllVisiblebooleantrueHide nav buttons if all slides is visible
innerPropsobject{}DOM props for inner div element
itemsListPropsobject{}DOM props for items list div element
itemsToScrollnumber1How many slides to scroll at once
itemsToShownumber0 (automaticaly calculated)How many slides to show
onAfterChangefunctionnullactiveSlideIndex change callback
onRequestChangefunctionCallback to handle every time the active slide changes, receives the new active index as arguments.
responsivePropsArray 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
speednumber0Carousel scroll speed (css transition speed) in ms
updateOnItemClickbooleanfalseUpdate active item index after click on some slide
centerMode (disabled if infinite prop disabled)booleanfalseAlign active slide to the center of the carousel container viewport
infinitebooleantrueEnable infinite loop scroll
disableNavIfEdgeVisible (disabled if infinite prop enabled)booleantrueDisable carousel forward nav if last slide is visible / Disable carousel backward nav if first slide is visible
disableNavIfEdgeActivebooleantrueDisable 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
Recommended