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

React Carousel Minimal
Easy to use, responsive and customizable carousel component for React Projects.
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
Name | Value | Description |
---|---|---|
data | array | Array of carousel items, containg JSON elements of the form { image: IMAGE_PATH, caption: TEXT_CAPTION } |
automatic | boolean | Enable auto play |
time | number | Interval in milliseconds after which it autmatically goes to the next slide if automatic is true , defaults to 2000 |
width | string | Width of the Carousel, eg: 600px |
height | string | Width of the Carousel, eg: 400px |
slideNumber | boolean | Enable slide number indicators |
captionStyle | JSON | React style object for the captions |
radius | string | Border radius of the slides, eg: 10px |
slideNumberStyle | JSON | React style object for slide number indicators |
captionPosition | string | Position of the text captions, available options: top, center, bottom |
dots | boolean | Enable slide indicator dots |
pauseIconColor | string | Color of the pause icon, eg: white |
pauseIconSize | string | size of the pause icon, eg: 40px |
slideBackgroundColor | string | Sets the slides' background color, eg: darkgrey |
slideImageFit | string | Sets the object-fit of the slides' image, available options contain and cover |
thumbnails | boolean | Enables thumbnail indicators |
thumbnailWidth | string | Width of the thumbnail, defaults to 100px |