https://github.com/saadqbal/react-stacked-carousel

Rotating Carousel with stacked cards
https://github.com/saadqbal/react-stacked-carousel

carousel react-library react-stacked-card reactjs stacked-cards

Last synced: about 1 year ago
JSON representation

Rotating Carousel with stacked cards

• Host: GitHub
• URL: https://github.com/saadqbal/react-stacked-carousel
• Owner: saadqbal
• Created: 2020-12-04T14:27:35.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-03-03T11:40:00.000Z (over 4 years ago)
• Last Synced: 2025-03-27T18:13:12.477Z (about 1 year ago)
• Topics: carousel, react-library, react-stacked-card, reactjs, stacked-cards
• Language: JavaScript
• Homepage: http://asadiqbal.me/react-stacked-carousel/
• Size: 6.13 MB
• Stars: 15
• Watchers: 1
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-stacked-carousel

> Rotating Carousel with stacked cards

![react-stacked-carousel](screen.gif)

[![NPM](https://img.shields.io/npm/v/react-stacked-carousel.svg)](https://www.npmjs.com/package/react-stacked-carousel) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

# Install

```bash

npm install --save react-stacked-carousel

```

# [Demo](http://asadiqbal.me/react-stacked-carousel/)

# Usage

```jsx

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 (

    


      {"<"}}

        rightButton={{">"}}

      >

        


          
1 Card

        

        


          
2 Card

        

        


          
3 Card

        

        


          
4 Card

        

      

      

  )

}

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` | `‹` | **ReactComponent** for **Left** button |

|`rightButton` | `›` | **ReactComponent** for **Right** button |

## License

MIT © [saadqbal](https://github.com/saadqbal)