Ninety-nine Pitchers of Malt
Miss any of our Open RFC calls?Watch the recordings here! »

sleek-react-carousel

1.1.4 • Public • Published

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.

NPM JavaScript Style Guide License: MIT

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

Install

npm i sleek-react-carousel

DownloadsWeekly Downloads

16

Version

1.1.4

License

MIT

Unpacked Size

60.7 kB

Total Files

8

Last publish

Collaborators

  • avatar