@stnew/carousel

@stnew/carousel

An unstyled carousel component for React projects that allows for custom styling after import.

Usage

// require.js
const carousel = require('@stnew/carousel');

// es6
import Carousel from '@stnew/carousel';

Props

• items - ReactNode[] Elements that will be cycled through and displayed. Must have at least 3 elements (otherwise, why are you using a carousel?).
• prevButton - ReactNode Element used as the 'previous item'
• nextButton - ReactNode Element used as the 'next item' button.button.
• startIndex - number index of the element that will be shown first.
• autoRotate - boolean toggle for the carousel to auto-rotate.
• autoRotateTimeout - number time between auto-rotating (in milliseconds)

Element classes

• carousel-container - outer-most container for the carousel.
• carousel-button - div element to which click handlers are attached. Acts as a wrapper for an optional element to act as the button.
  • carousel-button next - the button wrapper element that cycles forward.
  • carousel-button prev - the button wrapper element that cycles backward.
• carousel-items - wrapper for all carousel items.
• carousel-item-wrapper - wrapper for each carousel item.
  • carousel-item-wrapper active - the active carousel item
  • carousel-item-wrapper prev - the previously active carousel item
  • carousel-item-wrapper next - the next active carousel item
• carousel-indicators - wrapper for all carousel indicators (meant to be optional visual indicators for progress through the carousel items).
• carousel-indicator - individual carousel indicator
  • carousel-indicator active - indicates the item that is currently active