Vs-react-component-carousel NPM

vs-react-component-carousel

A react and tailwind component library.

Installation

Use the package manager npm to install the package.

npm install vs-react-component-carousel
or
yarn add vs-react-component-carousel

This component library internally uses TailwindCSS to compose it's design. So TailwindCSS need to be installed as dependency.

npm install -D tailwindcss postcss autoprefixer
or
yarn add --dev vs-react-component-carousel

after that initialise Tailwind in the project.

npx tailwindcss init -p

Allow Tailwind compiler to apply css on the library code.

module.exports = {
  content: [
    ...
    './node_modules/vs-react-component-carousel/**/*.{js,ts,jsx,tsx,mdx,cjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Set up the Tailwind directives inside the global css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

import { Carousel } from "vs-react-component-carousel";

function App() {
  // ele = your images URL list
  const ele = [
    "https://via.placeholder.com/600x400?text=A",
    "https://via.placeholder.com/600x400?text=B",
    "https://via.placeholder.com/600x400?text=C",
    "https://via.placeholder.com/600x400?text=D",
  ];
  return (
    <div className="flex w-screen h-screen relative">
      <Carousel
        autoplay={false}
        rows={2}
        elements={ele}
        showItemsPerRow={3}
        paginationClassNames={"dot"}
        paginationActiveClassNames={"activeDot"}
        showPagination={true}
        paginationPosition={"bottom"}
        showIndicators={true}
        leftIndicatorClassNames={"left_btn"}
        rightIndicatorClassNames={"right_btn"}
        carouselContainerClassNames={"container_style"}
      />
    </div>
  );
}