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

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