3.9 KiB

Raw Blame History

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.

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;

3.9 KiB Raw Blame History