Description:
A minimal, responsive, customizable, touch-friendly, and auto-rotating carousel for React applications.
More Features:
- Infinite loop
- Autoplay with custom duration
- Supports text caption
- Pause autoplay on hold with pause icon and customizations
- Slide number indicators
- Custom slide background color
- Thumbnail slide indicators
How to use it:
1. Install and import the carousel component in your app.
# NPM $ npm i react-carousel-minimal --save
import { Carousel } from 'react-carousel-minimal';2. Add the carousel component to your app and define your own image data.
function App() {
const data = [
{
image: "1.jpg",
caption: "Image Alt 1"
},
{
image: "2.jpg",
caption: "Image Alt 2"
},
{
image: "3.jpg",
caption: "Image Alt 3"
},
];
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;Preview:
