@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.