react-cards-slider

A customizable and Responsive React component for cards sliding built with TypeScript.

Live Demo

Check out the CodePen example.

Installation

Install the package via npm:

npm install react-cards-slider

Or using yarn:

yarn add react-cards-slider

📌 Note

This package from version 1.0.4 works with any react version supporting hooks.

Usage

Import the SliderContainer component and use it in your React application:

import SliderContainer from "react-cards-slider";

function App() {
  const cards = [1,2,3,4,5,6];

  const buttonClasses = `font-serif w-12 h-12 flex justify-center items-center rounded-full 
          bg-gradient-to-r from-slate-300 to-blue-100 shadow-md disabled:cursor-not-allowed
          active:scale-95 disabled:opacity-50`

  return (
    <div className='w-10/12 m-auto mt-10'>
      <SliderContainer
        containerClasses='flex justify-center items-center shadow-md'
        leftButtonClasses={`${buttonClasses} mr-3`}
        rightButtonClasses={`${buttonClasses} ml-3`}
        cardsWrapperClasses='gap-4'
      >
        {
          cards.map((card) => {
            return <div 
              key={card} 
              className={`bg-gradient-to-r from-teal-400 to-yellow-200 text-2xl font-light flex justify-center 
                items-center h-60 w-52 border border-green-500 rounded-md shrink-0`}
              >
              {card}
            </div>
          })
        }
      </SliderContainer>
    </div>
  )
}

export default App

Props

| Prop Name | Type | Description | | -------------------------- | ------ | ------------------------------------------------ | | containerClasses | string | CSS classes for the main container | | cardsWrapperClasses | string | CSS classes for the wrapper that holds cards | | leftIcon | ReactNode | Icon for the left navigation button (default: "<") | | rightIcon | ReactNode | Icon for the right navigation button (default: ">") | | leftButtonClasses | string | CSS classes for the left navigation button | | rightButtonClasses | string | CSS classes for the right navigation button | | transitionDuration | string | Duration of the transition effect (default: ".7s") | | transtionTimingFunction | string | Timing function of the transition (default: "ease-in-out") | | debounceTime | number | Debounce time in milliseconds for resetting cards container on window resize (default: 50) | | reverseSlideDirection | boolean | To reverse slide direction of card on left or right button click (default: "false") | | children | ReactNode | Elements inside the slider container |

License

MIT