react-carousel-minimal

React Carousel Minimal

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

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