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

React.js Responsive Minimal Carousel
https://github.com/sahilsaha7773/react-carousel-minimal

carousel hacktoberfest hacktoberfest2021 react react-component slider

Last synced: about 1 year ago
JSON representation

React.js Responsive Minimal Carousel

• Host: GitHub
• URL: https://github.com/sahilsaha7773/react-carousel-minimal
• Owner: sahilsaha7773
• License: mit
• Created: 2021-08-06T07:28:53.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-23T09:01:02.000Z (almost 4 years ago)
• Last Synced: 2025-04-02T16:26:08.109Z (about 1 year ago)
• Topics: carousel, hacktoberfest, hacktoberfest2021, react, react-component, slider
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-carousel-minimal
• Size: 1.4 MB
• Stars: 89
• Watchers: 2
• Forks: 40
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# 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](http://sahilsaha.me/react-carousel-minimal-demo/)

## 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

```js

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

                  


                  Next line

                
`

    },

    {

      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 (

    


      


        
React Carousel Minimal

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

        


          

        

      

    

  );

}


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 |