esrafilelahi / react-vertical-animated-slider

the animated vertical slider (carousel) for reactjs

react-vertical-animated-slider

React Vertical Animated Slider is a versatile and user-friendly ReactJS component designed to enhance the visual appeal and functionality of your web applications. With seamless integration and effortless customization, this slider empowers developers to create stunning vertical sliders with smooth animations.

click here to see : live demo

---

install :

npm i react-vertical-animated-slider

how to use :

  import VerticalAnimatedCarousel from "react-vertical-animated-slider";

  <VerticalAnimatedCarousel data={someData} CardItem={YourCardItemComponent} />

props :

data: unknown; ---> array of data
CardItem: React.ComponentType<{ card: unknown }>; ---> CardItem Component

containerClassName?: string; ---> className with string
containerStyle?: React.CSSProperties; style with CSSProperties like this : {{ height: '10rem' }}

carouselClassName?: string; ---> className with string
carouselStyle?: React.CSSProperties; ---> style with CSSProperties like this : {{ height: '10rem' }}

cardItemClassName?: string; ---> className with string
cardItemStyle?: React.CSSProperties; ---> style with CSSProperties like this : {{ height: '10rem' }}

behindCardSpace?: number; ---> space of card behind main card, default is 1.4
maxBehindCardVisibility?: number; ---> max number of card visiblity of cards, default is 2
startFromRight?: boolean; ---> startFromRight or left, default is right { startFromRight: true }

how to customize it :

  <VerticalAnimatedCarousel data={someData} CardItem={YourCardItemComponent} containerStyle={{ height: '10rem', marginTop: '2rem' }} carouselStyle={{ height: '10rem' }} cardItemStyle={{ height: '10rem' }} />

npm package link

go-to npm package link