@nicecaroujs/react NPM

Carousel Library(beta)

A simple and customizable carousel library for React. This component allows you to display items dynamically with flexible configuration options.

Installation

To use this library, you need to install it first. You can do this via npm or yarn:

npm install @nice-caroujs/react

Basic configuration for exampls

import { NcContainer, NcSlide, NcWrapper } from ' @nice-caroujs/react'
import "@nicecaroujs/react/dist/cjs/nice-carou.css"
import React from 'react'

const CarouselComponent = ({ tab }) => {
  const options = {
    width: "100%",
    height: "15rem",
    containerRadius: "0.5rem",
    slideRadius: "0.5rem",
    theme: "light",
    itemsPerPage: 4,
    breakpoints: {
      desktop: {
        itemsPerPage: 4,
      },
      tablet: {
        itemsPerPage: 2,
      },
      phone: {
        itemsPerPage: 1,
      }
    },
    bgGradientAnimated: false,
    arrows: {
      position: "inside",
      shake: true,
      type: "chevron"
    },
    pagination: {
      position: "outside",
      enabled: true,
      wrap: true
    }
  };

  return (
    <NcContainer aria-label='carousel test' options={options}>
      <NcWrapper className="w-36">
          <NcSlide key={1}>
            <div className='h-full w-full flex justify-center items-center gradientSlide'>
              <img src={img1} alt={"image 1"} className="object-cover h-full w-full rounded" />
            </div>
          </NcSlide>
            <NcSlide key={2}>
            <div className='h-full w-full flex justify-center items-center gradientSlide'>
              <img src={img2} alt={"image 2"} className="object-cover h-full w-full rounded" />
            </div>
          </NcSlide>
            <NcSlide key={3}>
            <div className='h-full w-full flex justify-center items-center gradientSlide'>
              <img src={img3} alt={"image 3"} className="object-cover h-full w-full rounded" />
            </div>
          </NcSlide>
      </NcWrapper>
    </NcContainer>
  );
};

export default CarouselComponent;