# ResponsiveCarousel.jsx
=========================

## Overview
------------

ResponsiveCarousel is a flexible and customizable carousel component built with React. It is designed to work seamlessly across various devices and screen sizes, providing a responsive and engaging user experience.

## Features
------------

*   **Responsive Design**: The carousel adapts to different screen sizes and devices, ensuring a consistent and optimal viewing experience.
*   **Customizable**: Easily customize the carousel's appearance, behavior, and layout to fit your specific needs.
*   **Touch and Swipe Support**: Supports touch and swipe gestures for navigating through the carousel on mobile devices.
*   **Keyboard Navigation**: Allows users to navigate through the carousel using their keyboard.
*   **Auto-Play and Pause**: Automatically plays the carousel and pauses on hover or when the user interacts with it.

## Props
------------

The following props are available for customizing the ResponsiveCarousel component:

### Required Props

*   **children**: The content to be displayed within the carousel. This can be a single element or an array of elements.

### Optional Props

*   **limit**: The maximum number of items to display within the carousel at a given time. Defaults to 3.
*   **mdLimit**: The maximum number of items to display within the carousel on medium-sized screens. Defaults to 4.
*   **smLimit**: The maximum number of items to display within the carousel on small-sized screens. Defaults to 2.
*   **lgLimit**: The maximum number of items to display within the carousel on large-sized screens. Defaults to 5.
*   **title**: The title of the carousel. Defaults to an empty string.
*   **bgImg**: The background image of the carousel. Defaults to an empty string.
*   **autoAdvanceInterval**: The interval at which the carousel automatically advances. Defaults to 3000 milliseconds.
*   **pauseOnHover**: Whether the carousel should pause when the user hovers over it. Defaults to true.
*   **autoPlay**: Whether the carousel should automatically play. Defaults to true.
*   **arrowPosition**: The position of the navigation arrows. Defaults to "center".
*   **showArrows**: Whether to display the navigation arrows. Defaults to true.
*   **border**: The border style of the carousel. Defaults to "solid 1px #ccc".
*   **showNavigation**: Whether to display the navigation buttons. Defaults to true.
*   **gap**: The gap between items within the carousel. Defaults to "10px".
*   **bg**: The background color of the carousel. Defaults to "#fff".
*   **px**: The padding x of the carousel. Defaults to "20px".
*   **py**: The padding y of the carousel. Defaults to "10px".

## Usage
-----

To use the ResponsiveCarousel component, simply import it into your React application and pass in the required props.

```jsx
import React from 'react';
import ResponsiveCarousel from './ResponsiveCarousel';

const MyComponent = () => {
    const carouselChildren = [
        <div key={1}>Child 1</div>,
        <div key={2}>Child 2</div>,
        <div key={3}>Child 3</div>,
        <div key={4}>Child 4</div>,
        <div key={5}>Child 5</div>,
        <div key={6}>Child 6</div>,
    ];

    return (
        <div>
            <ResponsiveCarousel
                children={carouselChildren}
                limit={3}
                mdLimit={4}
                smLimit={2}
                lgLimit={5}
                title="My Carousel"
                bgImg="https://example.com/background.jpg"
                autoAdvanceInterval={3000}
                pauseOnHover={true}
                autoPlay={true}
                arrowPosition="center"
                showArrows={true}
                border="solid 1px #ccc"
                showNavigation={true}
                gap="10px"
                bg="#fff"
                px="20px"
                py="10px"
            />
        </div>
    );
};

export default MyComponent;