react-stacked-carousel

Rotating Carousel with stacked cards

Install

npm install --save react-stacked-carousel

Demo

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