timothycarambat / react-carousel-minimal

React.js Responsive Minimal Carousel w/ support for multiple carousels on the same page

React Carousel Minimal (Multiple Carousel Support)

Easy to use, responsive and customizable carousel component for React Projects. Supports multiple carousels on screen at the same time + other features

Installation

• add this repo to your package.json directly.

Original NPM Demo Link

Features

• Responsive
• Customizable
• Infinite loop
• Autoplay with custom duration
• Supports text 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
• Supports multiple carousels
• onSlideClick to respond to direct image clicks

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: "San Francisco"
    },
    {
      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: 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
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