Responsive Minimal Carousel For React

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:

Responsive Minimal Carousel For React

Download Details:

Author: sahilsaha7773

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/sahilsaha7773/react-carousel-minimal

License: MIT

You Might Be Interested In:

Add Comment