React Carousel Minimal
Installation
npm i react-carousel-minimal
Check out the demo here: Demo Link
Features
- Responsive
- Customizable
- Infinite loop
- Autoplay with custom duration
- Supports HTML content as 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
- Option to hide nav buttons
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: `<div>
San Francisco
<br/>
Next line
</div>`
},
{
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: HTML_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 |
| showNavBtn | boolean | Hide or show nav buttons, set to true by default |