@nicecaroujs/react/README.md

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

# 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:

```bash
npm install @nice-caroujs/react

```

# Basic configuration for exampls
 
```javascript
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;
```

## for more about nice-carou  clique here : 

 [our website](https://nice-carou.leonelyimga.com)