rc-infinite-carousel/README.md

A lightweight and customizable infinite carousel component for React. Perfect for displaying images, logos, testimonials, or any other content with smooth transitions and flexible configuration options.

# rc-infinite-carousel

A lightweight and customizable infinite carousel component for React. Perfect for displaying images, logos, testimonials, or any other content with smooth transitions and flexible configuration options.

## Installation

```bash
npm install rc-infinite-carousel
```

## Features

- Infinite scrolling carousel.
- Customizable slide rendering via the `renderItem` function.
- Supports smooth animations with customizable durations.
- `direction` prop to control scrolling direction (LEFT or RIGHT).
- `showMask` prop to toggle mask-image filter for enhanced visual appeal.
- `pauseOnHover` prop to pause the animation when the user hovers over the carousel.
- `onSlideClick` callback for handling slide click events.
- Accessibility support with `ariaLabel` and `role` props.
- Automatically calculates visible slides based on the container size.

## Usage

```jsx
import Carousel from "rc-infinite-carousel";
import "rc-infinite-carousel/dist/index.css";

const data = [
  { id: 1, content: "Slide 1" },
  { id: 2, content: "Slide 2" },
  { id: 3, content: "Slide 3" },
  { id: 4, content: "Slide 4" },
  { id: 5, content: "Slide 5" },
  { id: 6, content: "Slide 6" },
  { id: 7, content: "Slide 7" },
  { id: 8, content: "Slide 8" },
  // Add more slides as needed
];

const renderItem = ({ item }) => (
  <div
    style={{
      width: 250,
      height: 250,
      background: "#AFF253",
      fontSize: 40,
      padding: 8,
    }}
  >
    {item.content}
  </div>
);

const App = () => (
  <Carousel
    data={data}
    renderItem={renderItem}
    animationDuration={10}
    direction="LEFT"
    showMask={true}
    pauseOnHover={true}
  />
);

export default App;
```

## Props

| Prop                | Description                                         | Type     | Default  |
| ------------------- | --------------------------------------------------- | -------- | -------- |
| `data`              | Array of items to display.                          | Array    | required |
| `renderItem`        | Function to render each slide.                      | Function | required |
| `animationDuration` | Duration of the scrolling animation in seconds.     | Number   | 10       |
| `direction`         | Direction of the carousel ("LEFT" or "RIGHT").      | String   | "LEFT"   |
| `showMask`          | Boolean to enable or disable the mask-image filter. | Boolean  | false    |
| `pauseOnHover`      | Boolean to pause the animation when hovering.       | Boolean  | false    |
| `onSlideClick`      | Function triggered when a slide is clicked.         | Function | optional |
| `ariaLabel`         | Accessibility label for the carousel.               | String   | optional |
| `role`              | Accessibility role for the carousel.                | String   | optional |

## Development

To contribute to the library, follow these steps:

1. Clone the repository.
2. Install dependencies: `npm install`
3. Build the project: `npm run build`

## License

This project is licensed under the Apache-2.0 License.

## Links

- [npm package](https://www.npmjs.com/package/rc-infinite-carousel)
- [GitHub repository](https://github.com/programmer-rahul/rc-infinite-carousel)
<!-- - [Demo](https://demo.com) -->