React Carousel Minimal
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 |
10.8k Dec 29, 2022
26 Oct 25, 2022
16.9k Jan 4, 2023
130 Dec 9, 2022
3 Feb 23, 2022
18.2k Jan 8, 2023
21 Dec 22, 2022
281 Dec 25, 2022
4 May 9, 2022
14 Dec 17, 2022
21.7k Dec 30, 2022
32.4k Dec 29, 2022
6.5k Jan 1, 2023
39 Jan 3, 2023
29 Oct 11, 2022
182 Dec 28, 2022
4 Jun 5, 2022
3 Oct 11, 2021
6 Jun 5, 2022