https://github.com/devsgnr/carousel

Lightweight & Themeable React Carousel with 500+ downloads, I kept it simple with 45 lines of logic controlling the whole package, super light weight for those situation when you just want the functionality.
https://github.com/devsgnr/carousel

carousel carousel-component carousel-plugin devsgnr devsgnr-carousel react react-carousel

Last synced: 5 months ago
JSON representation

Lightweight & Themeable React Carousel with 500+ downloads, I kept it simple with 45 lines of logic controlling the whole package, super light weight for those situation when you just want the functionality.

• Host: GitHub
• URL: https://github.com/devsgnr/carousel
• Owner: devsgnr
• License: mit
• Created: 2022-01-25T20:36:23.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-12T20:49:46.000Z (almost 4 years ago)
• Last Synced: 2025-08-09T04:36:13.429Z (7 months ago)
• Topics: carousel, carousel-component, carousel-plugin, devsgnr, devsgnr-carousel, react, react-carousel
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/devsgnr-carousel
• Size: 291 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# devsgnr-carousel

:tada: A Simple Carousel built using React, Typescript and styled-components

---

![npm](https://img.shields.io/npm/v/devsgnr-carousel)

![npm bundle size](https://img.shields.io/bundlephobia/min/devsgnr-carousel)

![npm](https://img.shields.io/npm/dw/devsgnr-carousel)

![NPM](https://img.shields.io/npm/l/devsgnr-carousel)

![GitHub watchers](https://img.shields.io/github/watchers/devsgnr/carousel?style=social)

---

## Table of Content

1. [Install](#install)

2. [Usage](#usage)

3. [Demos](#demos)

4. [Props](#props)

## Install

##### npm

`npm install devsgnr-carousel`

##### yarn

`yarn add devsgnr-carousel`

---

## Usage

Example with default props ~ customize props according to your needs, check [props](#props).

```tsx

...

import Carousel from "devsgnr-carousel

const App = () => {

  const pictures: string[] = [...];

  return (

    


      

    

  );

};


export default App;

```

#### Demos

- [TypeScript Demo](https://codesandbox.io/s/devsgnr-carousel-4lm2d)

- [JavaScript Demo](https://codesandbox.io/s/devsgnr-carousel-js-dxxyf)

---

## Props

| props                     | values                                                                                                |

| ------------------------- | ----------------------------------------------------------------------------------------------------- |

| autoPlay                  | `boolean`: `optional?` default `true`. set the carousel to automatically play or not                  |

| timeout                   | `number`: `optional?` default `5000`. set the duration for each picture                               |

| height                    | `string`: `optional?` default `"100%"`. set the height of the carousel                                |

| pictures                  | `string[]`: `required` this is the pictures address                                                   |

| showThumbs                | `boolean`: `optional?` default `false`. when set to `true` shows the image thumbnails                 |

| showIndicators            | `boolean`: `optional?` default `true`. when set to `false` hides the indicators                       |

| showButtons               | `boolean`: `optional?` default: `true`. when set to `false` hides buttons                             |

| thumbnailOutlineColor     | `string`: `optional?` default `#000`. accepts `hsla`, `rgba`, `rgb`, and `hex` values                 |

| thumbnailOutlineThickness | `number`: `optional?` default `2`. sets the thickness of the outline of the thumbnails                |

| thumbnailOutlineStyle     | `string`: `optional?` default `"solid"`. accepts `"solid"`, `"dashed"`, `"dotted"` as values          |

| thumbnailOutlineOffset    | `number`: `optional?` default `1`. set the offset of the outline from the thumbnail, ie. how far away |

| borderRadius              | `number`: `optional?` default `10`. set the `border-radius` of the carousel                           |

---

Package bundled using Rollup.js