React Carousel Minimal

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 |