1.0.3 • Published 6 years ago
@stnew/carousel v1.0.3
@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 itemcarousel-item-wrapper prev- the previously active carousel itemcarousel-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 indicatorcarousel-indicator active- indicates the item that is currently active