react-carousel-minimal

React Carousel Minimal

Easy to use, responsive and customizable carousel component for React Projects.

Features

• Responsive
• Customizable
• Infinite loop
• Autoplay with custom duration
• Supports text caption
• Pause autoplay on hold
• Slide number indicators

Usage

import './App.css';
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: "Image 1"
    },
    {
      image: "https://cdn.britannica.com/s:800x450,c:crop/35/204435-138-2F2B745A/Time-lapse-hyper-lapse-Isle-Skye-Scotland.jpg",
      caption: "Image 2"
    },
    {
      image: "https://static2.tripoto.com/media/filter/tst/img/735873/TripDocument/1537686560_1537686557954.jpg",
      caption: "Image 3"
    }
  ];

  const captionStyle = {
    fontSize: '1.5em',
    fontWeight: 'bold',
  }
  const slideNumberStyle = {
    fontSize: '20px',
    fontWeight: 'bold',
  }
  return (
    <div className="App">
      <div>
        <Carousel
          data={data}
          time={2000}
          width="600px"
          height="400px"
          captionStyle={captionStyle}
          radius="10px"
          slideNumber={true}
          slideNumberStyle={slideNumberStyle}
          captionPosition="bottom"
          style={{
            width: "fit-content",
            margin: "40px auto"
          }}
          automatic={true}
          dots={true}
        />
      </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

Changelog

v1.0.0

2021-08-06

Pull Requests

• Merge pull request #1 from sahilsaha7773/add-license-1