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