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-carousel

or

yarn add sleek-react-carousel

Simple Usage

import React, { Component } from 'react'

import SleekCarousel from 'sleek-react-carousel'
import 'sleek-react-carousel/dist/index.css'

const App = () => {
    return (
        <SleekCarousel delay={null}>
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </SleekCarousel>
    )
}

Live Demo

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 start

or

git clone git@github.com:ShreyKumar/react-sleek-carousel.git && cd react-sleek-carousel && npm start

Contributors

Shreyansh "Shrey" Kumar

License

MIT © ShreyKumar