@jdthornton/carousel NPM

@jdthornton/carousel

React carousel context and components.

Demo

https://jdthornton.github.io/#/carousel

Install

$ npm install @jdthornton/carousel

Usage

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.