React Carousel Component

A fully responsive and customizable carousel component for React. This package allows you to create beautiful, functional carousels with optional navigation, dots, autoplay, and responsive layouts, making it highly versatile for different use cases.

Features

• Autoplay: Automatically transitions between carousel items without manual input.
• Looping: Enable looping for continuous slide transitions.
• Navigation: Next and Previous arrows to navigate through the items.
• Dots: Visual indicators to show which slide is currently active.
• Responsive: Adjust the number of carousel items displayed based on screen size.
• Customizable: Easily customize the carousel's appearance and functionality using Tailwind CSS.

Installation

To install the carousel component in your React project, run one of the following commands:

Using npm:

npm install my-react-carousel-component

Using yarn:

yarn add my-react-carousel-component

Basic Usage Example

Now, provide a basic example of how to use your carousel component. This includes importing the component and using it with a few sample slides. You should include how to pass props to customize it, such as options, className, etc.

Basic Example

To use the carousel, import it into your React component and wrap your carousel items in it. Here's a basic example:

import React from "react";
import CarouselWrapper from "my-react-carousel-component";

const App = () => (
  <CarouselWrapper
    options={{
      loop: true,
      nav: true,
      dots: true,
      responsive: {
        0: { items: 1 },
        768: { items: 2 },
        1024: { items: 3 },
      },
    }}
    className="owl-carousel" // Tailwind or custom CSS classes
  >
    <div className="item bg-red-300 p-8">
      <h4>1</h4>
    </div>
    <div className="item bg-blue-300 p-8">
      <h4>2</h4>
    </div>
    <div className="item bg-green-300 p-8">
      <h4>3</h4>
    </div>
    <div className="item bg-yellow-300 p-8">
      <h4>4</h4>
    </div>
    <div className="item bg-gray-300 p-8">
      <h4>5</h4>
    </div>
    <div className="item bg-pink-300 p-8">
      <h4>6</h4>
    </div>
  </CarouselWrapper>
);

export default App;

Options

You can customize the carousel by passing the following options to the CarouselWrapper component:

• loop: (boolean) Enable or disable the looping of items. Default is false.
• autoplay: (boolean) Enable automatic transition between items. Default is false.
• autoplayInterval: (number) Time in milliseconds between auto transitions. Default is 3000.
• dots: (boolean) Show navigation dots below the carousel. Default is false.
• nav: (boolean) Show previous/next arrows for navigation. Default is false.
• responsive: (object) Define the number of items to show at different screen sizes.

Example of responsive options:

responsive: {
  0: { items: 1 },     // 1 item on small screens
  768: { items: 2 },   // 2 items on medium screens
  1024: { items: 3 },  // 3 items on large screens
}


---