92 lines
3.9 KiB
Markdown
92 lines
3.9 KiB
Markdown
# 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; |