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

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

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
• GitHub repository