Carousel Component

The Carousel component is a customizable React component that creates a responsive and interactive image slider. It's built with TypeScript and styled-components, providing a smooth sliding experience with navigation controls and indicators.

Features

• Responsive design
• Smooth transitions between slides
• Navigation controls (previous and next buttons)
• Indicator dots for direct slide selection
• Supports any React node as slide content
• TypeScript support for type safety
• Styled using styled-components for consistent theming

Installation

To use the Carousel component in your React application, install it via npm:

npm install @droid-tech/react-ts-carousel

Usage

To use the Carousel component, import it and provide an array of slides:

import Carousel from "@droid-tech/react-ts-carousel";

const MyComponent = () => {
  const slides = [
    <img src="image1.jpg" alt="Slide 1" />,
    <img src="image2.jpg" alt="Slide 2" />,
    <img src="image3.jpg" alt="Slide 3" />,
  ];

  return <Carousel slides={slides} />;
};

Props

The Carousel component accepts the following prop:

| Prop | Type | Required | Description | |----------|-------------------|----------|------------------------------------------------| | slides | React.ReactNode[] | Yes | An array of React nodes to be used as slides |

Features

1. Automatic Cycling: The carousel automatically cycles through slides.

2. Navigation Controls:

   • Left arrow (❮) to go to the previous slide
   • Right arrow (❯) to go to the next slide

3. Indicator Dots:

   • Displayed at the bottom of the carousel
   • Indicate the current slide
   • Can be clicked to navigate directly to a specific slide

4. Responsive Design:

   • The carousel adjusts to the width of its container
   • Slides are full-width within the carousel

5. Smooth Transitions: Slides transition smoothly using CSS transitions

Customization

The Carousel component uses styled-components, which allows for easy customization and theming. You can override the default styles by wrapping the Carousel component with a styled-components theme provider or by creating new styled components based on the existing ones.

Accessibility

The Carousel component is designed with accessibility in mind:

• Navigation buttons are keyboard-accessible
• Indicator dots are also keyboard-accessible, allowing users to jump to any slide

Conclusion

The Carousel component provides a flexible and customizable way to create image sliders or content carousels in your React application. With its responsive design, smooth transitions, and accessibility features, it can easily be integrated into your project to showcase images or other content in an engaging manner.