Skip to content

Latest commit

 

History

History
79 lines (60 loc) · 2.25 KB

README.md

File metadata and controls

79 lines (60 loc) · 2.25 KB

react-stacked-carousel

Rotating Carousel with stacked cards

react-stacked-carousel

NPM JavaScript Style Guide

Install

npm install --save react-stacked-carousel

Usage

import React, {StyleSheet, useState} from 'react'
import { StackedCarousel } from 'react-stacked-carousel'
import 'react-stacked-carousel/dist/index.css';
const App = () => {
  const [card, setCard] = useState(null);
  const onCardChange = (event) => {
    console.log("Card", event);
  }
  
  return (
    <div className="main">
      <StackedCarousel
        autoRotate={false}
        onCardChange={onCardChange}
        containerClassName={"container"}
        cardClassName="card"
        leftButton={<button>{"<"}</button>}
        rightButton={<button>{">"}</button>}
      >
        <div key={'child1'}>
          <h2>1 Card</h2>
        </div>
        <div key={'child2'}>
          <h2>2 Card</h2>
        </div>
        <div key={'child3'}>
          <h2>3 Card</h2>
        </div>
        <div key={'child4'}>
          <h2>4 Card</h2>
        </div>
      </StackedCarousel>
      </div>
  )
}
export default App

Props

Name Default Description
autoRotate true auto rotate the carousel cards after rotationInterval millioseconds are passed
rotationInterval 2000 Rotate a card after this time passes in milliseconds.
onCardChange null A callback that returns the current card stack indexes object each time a card changes. The return object has this form: ({previousIndex: 0, currentIndex: 1, nextIndex: 2}).
containerClassName This class will be applied on the ul element
style Style will be applied on the ul element
cardClassName This class will be applied on the li element
leftButton <span>&lsaquo;</span> ReactComponent for Left button
rightButton <span>&rsaquo;</span> ReactComponent for Right button

License

MIT © saadqbal