npm package: @jdthornton/carousel
Description: React carousel context and components
Author: Jake Thornton
Latest version: 1.1.1

# @jdthornton/carousel

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/carousel.svg)](https://www.npmjs.com/package/@jdthornton/carousel)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/carousel.svg)](https://www.npmjs.com/package/@jdthornton/carousel)

React carousel context and components.

## Demo

https://jdthornton.github.io/#/carousel

## Install

```
$ npm install @jdthornton/carousel
```

## Usage

```js
import Carousel from "@jdthornton/carousel";
import '@jdthornton/carousel/styles.css';

function App(){
  return(
    <Carousel
      visibleCount={2}
      step={2}
      scrollbarHide>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
      <div>Slide 4</div>
      <div>Slide 5</div>
    </Carousel>
  )
}
```


## Props

| Prop                                                                      | Type                                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                |
| :------------------------------------------------------------------------ | :---------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `visibleCount`                                                            | number                                                                              | The number of slides visible                                                                                                                                                                                                                                                                                                                                                                               |
| `step`                                                                    | number                                                                              | The number of slides between each step                                                                                                                                                                                                                                                                                                                                                                     |
| `infinite`                                                                | boolean                                                                             | Enables the Carousel to start over when out of steps                                                                                                                                                                                                                                                                                                                                                       |
| `scrollable`                                                              | boolean                                                                             | Enables scrolling                                                                                                                                                                                                                                                                                                                                                                                          |
| `autoPlay`                                                                | boolean                                                                             | Enables the Carousel to automatically take steps based on the `interval` prop.                                                                                                                                                                                                                                                                                                                             |
| `interval`                                                                | number (in milliseconds)                                                            | The time in milliseconds it takes Carousel to automatically take a step.                                                                                                                                                                                                                                                                                                                                   |
| `disableControls`                                                         | boolean                                                                             | Disables all controls                                                                                                                                                                                                                                                                                                                                                                                      |
| `disableKeyboard`                                                         | boolean                                                                             | Disables keyboard controls                                                                                                                                                                                                                                                                                                                                                                                 |
| `overlayControls`                                                         | boolean                                                                             | Enables control UI overlay                                                                                                                                                                                                                                                                                                                                                                                 |
| `autoFocus`                                                               | boolean                                                                             | The Carousel will be focused on mount                                                                                                                                                                                                                                                                                                                                                                      |
| `showOnFocus`                                                             | boolean                                                                             | Shows control UI when Carousel is focused                                                                                                                                                                                                                                                                                                                                                                  |
| `controlOnFocus`                                                          | boolean                                                                             | Allows controls when Carousel is focused                                                                                                                                                                                                                                                                                                                                                                   |
| `stopOnFocus`                                                             | boolean                                                                             | Pauses autoplay when Carousel is focused                                                                                                                                                                                                                                                                                                                                                                   |
| `dark`                                                                    | boolean                                                                             | Switches to dark mode                                                                                                                                                                                                                                                                                                                                                                                      |
| `isVertical`                                                              | boolean                                                                             | Switches Carousel to vertical axis                                                                                                                                                                                                                                                                                                                                                                         |
| `dotsOverlay`                                                             | boolean                                                                             | Enables dots UI overlay                                                                                                                                                                                                                                                                                                                                                                                    |
| `dotsIsVertical`                                                          | boolean                                                                             | Switches dots UI to vertical axis                                                                                                                                                                                                                                                                                                                                                                          |
| `dotsDark`                                                                | boolean                                                                             | Switches dots UI to dark mode                                                                                                                                                                                                                                                                                                                                                                              |
| `dotsShowOnFocus`                                                         | boolean                                                                             | Only show dots UI when Carousel is focused                                                                                                                                                                                                                                                                                                                                                                 |
| `dotsHide`                                                                | boolean                                                                             | Hides dots UI                                                                                                                                                                                                                                                                                                                                                                                              |
| `arrowsOverlay`                                                           | boolean                                                                             | Enables arrows UI overlay                                                                                                                                                                                                                                                                                                                                                                                  |
| `arrowsIsVertical`                                                        | boolean                                                                             | Switches arrows UI to vertical axis                                                                                                                                                                                                                                                                                                                                                                        |
| `arrowsDark`                                                              | boolean                                                                             | Switches arrows UI to dark mode                                                                                                                                                                                                                                                                                                                                                                            |
| `arrowsShowOnFocus`                                                       | boolean                                                                             | Only show arrows UI when Carousel is focused                                                                                                                                                                                                                                                                                                                                                               |
| `arrowsHide`                                                              | boolean                                                                             | Hides arrows UI                                                                                                                                                                                                                                                                                                                                                                                            |
| `scrollbarOverlay`                                                        | boolean                                                                             | Enables scrollbar UI overlay                                                                                                                                                                                                                                                                                                                                                                               |
| `scrollbarIsVertical`                                                     | boolean                                                                             | Switches scrollbar UI to vertical axis                                                                                                                                                                                                                                                                                                                                                                     |
| `scrollbarDark`                                                           | boolean                                                                             | Switches scrollbar UI to dark mode                                                                                                                                                                                                                                                                                                                                                                         |
| `scrollbarShowOnFocus`                                                    | boolean                                                                             | Only show scrollbar UI when Carousel is focused                                                                                                                                                                                                                                                                                                                                                            |
| `scrollbarHide`                                                           | boolean                                                                             | Hides scrollbar UI                                                                                                                                                                                                                                                                                                                                                                                         |
| `sliderIsVertical`                                                        | boolean                                                                             | Switches slider and slides to vertical axis                                                                                                                                                                                                                                                                                                                                                                |
| `className`                                                               | string                                                                              | Custom class to be added to Carousel wrapper element                                                                                                                                                                                                                                                                                                                                                       |
| `classNames`                                                              | `{ container, slider, nextArrow, prevArrow, dot, activeDot }`                       | Custom classes to be used with the Carousel. Classes passed via the classNames prop are added to the defaults                                                                                                                                                                                                                                                                                              |
| `style`                                                                   | object                                                                              | Custom style to be added to the Carousel wrapper element                                                                                                                                                                                                                                                                                                                                                   |
| `styles`                                                                  | `{ container, slider, nextArrow, prevArrow, dot, activeDot }`                       | Custom styles to be used with the Carousel. Styles passed via the styles prop are added to the defaults                                                                                                                                                                                                                                                                                                    |
| `renderNextArrow`                                                         | `({ onClick: () => void, hasNext: boolean }) => React.ReactNode`                    | Render custom next button. Receives an `onClick` function, which moves the slider forward one step, and a `hasNext` boolean which is true if there is another step available.                                                                                                                                                                                                                              |
| `renderPrevArrow`                                                         | `({ onClick: () => void, hasPrev: boolean }) => React.ReactNode`                    | Render custom previous button. Receives an `onClick` function, which moves the slider backwards one step, and a `hasPrev` boolean which is true if there is another step available.                                                                                                                                                                                                                        |
| `renderDot`                                                               | `({ onClick: () => void, step: number, isActive: boolean }) => React.ReactNode`     | Render custom dot. Receives an `onClick` function, which moves the slider to the step the dot indicates, a `step` number, representing the step index of the dot, and an `isActive` boolean, if the dot's step index matches the Carousel's active step index.                                                                                                                                             |