sleek-react-carousel
A lightweight, easy to use and highly customizable React component that achieves a 'Carousel' or 'Slideshow' effect. Allows for relay, panning and scrolling effects.
Install
npm install --save sleek-react-carouselor
yarn add sleek-react-carouselSimple Usage
import React Component from 'react' import SleekCarousel from 'sleek-react-carousel'import 'sleek-react-carousel/dist/index.css' const App = return <SleekCarousel => <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </SleekCarousel> Customizability
This component has no required props
| Prop name | Default Prop | Type | Info |
|---|---|---|---|
children |
[] |
Array of Elements | Array of children elements for the component |
active |
0 |
Number | The index of the element in children that will be shown first after the component loads |
onTransitionStart |
() => {} |
Function | Callback that triggers before a transition between children elements begins, the index is provided as a parameter |
onTransitionOver |
() => {} |
Function | Callback that triggers while a transition between children elements occurs |
onTransitionEnd |
() => {} |
Function | Callback that triggers after a transition between children elements happen, the new index is provided as a parameter |
vertical |
false |
Boolean | Enables the vertical transitions |
height |
500 |
String, Number | Height of the main Carousel element in px, rem, em, default is px |
disableTracker |
false |
Boolean | Disables the tracker |
disableScroll |
false |
Boolean | Disable scrolling |
delay |
3000 |
Number | The time delay in ms between transitions |
speed |
1500 |
Number | The speed in ms of transitions |
looping |
false |
Boolean | Enable carousel of loop back to the start |
relay |
false |
Boolean | Enable "relaying" back to the start instead of looping back. If both relay and looping is enabled, the Carousel ignores looping |
panning |
false |
Boolean | Enable panning to switch between child elements |
containerClassName |
'' |
String | className for the Container of the main element which contains all children elements |
containerStyle |
{} |
Object | style for the Container of the main element which contains all children elements |
containerClassName |
'' |
String | className for the Container of the main element which contains all children elements |
containerStyle |
{} |
Object | style for the Container of the main element which contains all children elements |
containerClassName |
'' |
String | className for the main element which contains all children elements |
containerStyle |
{} |
Object | style for the main element which contains all children elements |
trackerClassName |
'' |
String | className for the tracker element |
trackerStyle |
{} |
Object | style for the tracker element |
trackerDotClassName |
'' |
String | className for the tracker dot element |
trackerDotStyle |
{} |
Object | style for the tracker dot element |
trackerDotActiveClassName |
'' |
String | className for the tracker dot element in the active state |
trackerDotActiveStyle |
{} |
Object | style for the tracker dot element in the active state |
Limitations
This package has some mobile responsiveness issues that is yet to be fixed Has some wierd window scroll into view issues if used with longer pages with more content
Quick Start for development purposes
git clone git@github.com:ShreyKumar/react-sleek-carousel.git && cd react-sleek-carousel && yarn startor
git clone git@github.com:ShreyKumar/react-sleek-carousel.git && cd react-sleek-carousel && npm startContributors
License
MIT © ShreyKumar
