# react-slim-carousel

> Minimal but feature-rich react carousel made using hooks.

Latest version **1.0.26** (published 2020-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-slim-carousel
pnpm add react-slim-carousel
yarn add react-slim-carousel
bun add react-slim-carousel
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.26 |
| Published | 2020-10-23 |
| First published | 2020-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 4 |
| Unpacked size | 170.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ari Seyhun |
| Maintainers | acidic9 |
| Keywords | react, carousel, slider, component, hooks |

## Links

- npm: https://www.npmjs.com/package/react-slim-carousel
- Repository: https://github.com/Acidic9/react-slim-carousel
- Homepage: https://github.com/Acidic9/react-slim-carousel#readme
- Issues: https://github.com/Acidic9/react-slim-carousel/issues
- npm.io page: https://npm.io/package/react-slim-carousel

## Dependencies (4)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [lodash.defaults](https://npm.io/package/lodash.defaults.md) ^4.2.0
- [@react-hook/media-query](https://npm.io/package/@react-hook/media-query.md) ^1.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.26 (latest) — 2020-10-23
- 1.0.25 — 2020-10-23
- 1.0.24 — 2020-10-22
- 1.0.23 — 2020-10-22
- 1.0.22 — 2020-10-22
- 1.0.21 — 2020-10-22
- 1.0.20 — 2020-10-22
- 1.0.19 — 2020-10-21
- 1.0.18 — 2020-10-21
- 1.0.17 — 2020-10-21
- 1.0.16 — 2020-10-21
- 1.0.15 — 2020-10-21
- 1.0.14 — 2020-10-21
- 1.0.13 — 2020-10-21
- 1.0.12 — 2020-10-21
- … 12 more at https://npm.io/package/react-slim-carousel/versions

## README

# react-slim-carousel

Minimal but feature-rich react carousel made using hooks.

[![NPM](https://img.shields.io/npm/v/react-slim-carousel.svg)](https://www.npmjs.com/package/react-slim-carousel) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

<a href="https://www.buymeacoffee.com/ariseyhun" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

## Install

```bash
npm install --save react-slim-carousel
```

## Demo

[![Edit React Slim Carousel Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://yog2j.csb.app/)

## Usage

```tsx
import React from 'react'

import {
  Carousel,
  CarouselProvider,
  Dots,
  PreviousButton,
  NextButton
} from 'react-slim-carousel'
import 'react-slim-carousel/dist/index.css'

export default function Example() {
  return (
    <CarouselProvider>
      <Carousel>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
      </Carousel>
      <Dots />
      <PreviousButton>Previous</PreviousButton>
      <NextButton>Next</NextButton>
    </CarouselProvider>
  )
}
```

Alternatively, you can use the [HOC](https://reactjs.org/docs/higher-order-components.html) approach by wrapping your component in `withCarousel()(Component)`. You should not use the `<CarouselProvider>` when using the HOC approach.

```tsx
import React from 'react'

import { Carousel, withCarousel, useCarousel } from 'react-slim-carousel'
import 'react-slim-carousel/dist/index.css'

function Example() {
  const { currentSlide } = useCarousel()

  return (
    <>
      <Carousel>{/* Slides here */}</Carousel>
      <span>Current slide: {currentSlide}</span>
    </>
  )
}

export default withCarousel()(Example)
```

## Options

| Setting        | Type          | Description                                                                 | Default            |
| -------------- | ------------- | --------------------------------------------------------------------------- | ------------------ |
| autoPlay       | `boolean`     | Autoplay through slides                                                     | `false`            |
| autoSize       | `boolean`     | Set the height (or width) to the largest slide depending on the orientation | `true`             |
| centerMode     | `boolean`     | Show active slide in the center                                             | `false`            |
| draggable      | `boolean`     | Enable/disable drag to slide                                                | `true`             |
| easing         | `string`      | CSS easing                                                                  | `'ease-in-out'`    |
| edgeFriction   | `number`      | Resistance when swiping edges of non-infinite carousels                     | `0.3`              |
| gap            | `number`      | Gap in pixels between each slide                                            | `0`                |
| infinite       | `boolean`     | Intinite loop sliding                                                       | `false`            |
| initialSlide   | `number`      | Initial slide to display                                                    | `0`                |
| interval       | `number`      | Time in ms between autoplay sliding                                         | `3000`             |
| orientation    | `'horizontal' | 'vertical'`                                                                 | Slider orientation | `'horizontal'` |
| playDirection  | `'normal'     | 'reverse'`                                                                  | Autoplay direction | `'normal'` |
| slidesToScroll | `number`      | Number of slides to scroll                                                  | `1`                |
| slideSpeed     | `number`      | Transition speed in ms                                                      | `400`              |
| threshold      | `number`      | Drag threshold for scrolling to next slide                                  | `0.2`              |
| visibleSlides  | `number`      | Number of slides visible                                                    | `1`                |

## Responsive

The Carousel component accepts an additional prop `responsive` which is an object with the keys being the pixel min width, and the value being settings to override.

Example:

```jsx
<Carousel
  visibleSlides={2}
  responsive={{
    768: {
      visibleSlides: 4
    }
  }}
>
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</Carousel>
```

## Styling

The bare minimum stylesheet should be imported from `'react-slim-carousel/dist/index.css'`. Styles for the previous/next buttons and dots are not included and should be done by your app.

Available classes:

**Carousel**

| Class                   | Description                             |
| ----------------------- | --------------------------------------- |
| `carousel`              | Base class                              |
| `carousel--horizontal`  | When orientation is set to 'horizontal' |
| `carousel--vertical`    | When orientation is set to 'vertical'   |
| `carousel--center-mode` | When centerMode is enabled              |

**Tray**

The tray is the direct child of the carousel and contains the slides.

| Class            | Description |
| ---------------- | ----------- |
| `carousel__tray` | Base class  |

**Slide**

| Class                     | Description                        |
| ------------------------- | ---------------------------------- |
| `carousel__slide`         | Base class                         |
| `carousel__slide--active` | When the slide is currently active |

**Previous button**

| Class                   | Description |
| ----------------------- | ----------- |
| `carousel-previous-btn` | Base class  |

**Next button**

| Class               | Description |
| ------------------- | ----------- |
| `carousel-next-btn` | Base class  |

**Dots**

| Class           | Description |
| --------------- | ----------- |
| `carousel-dots` | Base class  |

**Dot**

| Class                  | Description                |
| ---------------------- | -------------------------- |
| `carousel-dot`         | Base class                 |
| `carousel-dot--active` | When current dot is active |

## License

MIT © [Acidic9](https://github.com/Acidic9)

---
_Source: https://npm.io/package/react-slim-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._