carousel

Easy to use, responsive and customizable carousel component for React

Aug 12, 2021
Easy to use, responsive and customizable carousel component for React

React Carousel Minimal

Easy to use, responsive and customizable carousel component for React Projects.

View Demo View Github

Installation

npm i react-carousel-minimal

Features

  • Responsive
  • Customizable
  • Infinite loop
  • Autoplay with custom duration
  • Supports text caption
  • Pause autoplay on hold with pause icon and customizations
  • Slide number indicators
  • Swipe to go to next slide on touch devices
  • Custom slide background color
  • Thumbnail slide indicators

Usage

import { Carousel } from 'react-carousel-minimal'; function App() { const data = [ { image: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/1200px-GoldenGateBridge-001.jpg", caption: "San Francisco" }, { image: "https://cdn.britannica.com/s:800x450,c:crop/35/204435-138-2F2B745A/Time-lapse-hyper-lapse-Isle-Skye-Scotland.jpg", caption: "Scotland" }, { image: "https://static2.tripoto.com/media/filter/tst/img/735873/TripDocument/1537686560_1537686557954.jpg", caption: "Darjeeling" }, { image: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Palace_of_Fine_Arts_%2816794p%29.jpg/1200px-Palace_of_Fine_Arts_%2816794p%29.jpg", caption: "San Francisco" }, { image: "https://i.natgeofe.com/n/f7732389-a045-402c-bf39-cb4eda39e786/scotland_travel_4x3.jpg", caption: "Scotland" }, { image: "https://www.tusktravel.com/blog/wp-content/uploads/2020/07/Best-Time-to-Visit-Darjeeling-for-Honeymoon.jpg", caption: "Darjeeling" }, { image: "https://www.omm.com/~/media/images/site/locations/san_francisco_780x520px.ashx", caption: "San Francisco" }, { image: "https://images.ctfassets.net/bth3mlrehms2/6Ypj2Qd3m3jQk6ygmpsNAM/61d2f8cb9f939beed918971b9bc59bcd/Scotland.jpg?w=750&h=422&fl=progressive&q=50&fm=jpg", caption: "Scotland" }, { image: "https://www.oyorooms.com/travel-guide/wp-content/uploads/2019/02/summer-7.jpg", caption: "Darjeeling" } ]; const captionStyle = { fontSize: '2em', fontWeight: 'bold', } const slideNumberStyle = { fontSize: '20px', fontWeight: 'bold', } return ( <div className="App"> <div style={{ textAlign: "center" }}> <h2>React Carousel Minimal</h2> <p>Easy to use, responsive and customizable carousel component for React Projects.</p> <div style={{ padding: "0 20px" }}> <Carousel data={data} time={2000} width="850px" height="500px" captionStyle={captionStyle} radius="10px" slideNumber={true} slideNumberStyle={slideNumberStyle} captionPosition="bottom" automatic={true} dots={true} pauseIconColor="white" pauseIconSize="40px" slideBackgroundColor="darkgrey" slideImageFit="cover" thumbnails={true} thumbnailWidth="100px" style={{ textAlign: "center", maxWidth: "850px", maxHeight: "500px", margin: "40px auto", }} /> </div> </div> </div> ); } export default App;

Props

NameValueDescription
dataarrayArray of carousel items,
containg JSON elements of the form
{
image: IMAGE_PATH,
caption: TEXT_CAPTION
}
automaticbooleanEnable auto play
timenumberInterval in milliseconds
after which it autmatically goes to
the next slide if automatic is true,
defaults to 2000
widthstringWidth of the Carousel, eg: 600px
heightstringWidth of the Carousel, eg: 400px
slideNumberbooleanEnable slide number indicators
captionStyleJSONReact style object for the captions
radiusstringBorder radius of the slides, eg: 10px
slideNumberStyleJSONReact style object for slide number indicators
captionPositionstringPosition of the text captions, available options:
top, center, bottom
dotsbooleanEnable slide indicator dots
pauseIconColorstringColor of the pause icon, eg: white
pauseIconSizestringsize of the pause icon, eg: 40px
slideBackgroundColorstringSets the slides' background color, eg: darkgrey
slideImageFitstringSets the object-fit of the slides' image,
available options contain and cover
thumbnailsbooleanEnables thumbnail indicators
thumbnailWidthstringWidth of the thumbnail, defaults to 100px
Recommended