React-carousel-pro NPM

React or Next JS Carousel Package

A powerful and customizable React carousel package consisting of two components: Carousel and CarouselItem. Perfect for creating smooth and responsive carousels with advanced customization options.

Installation

Install the package using npm or yarn:

npm install react-carousel-pro

Or:

yarn add react-carousel-pro

Components

1. `Carousel`

The main component that handles the structure and functionality of the carousel.

Props

Prop Name	Type	Default	Description
`className`	`string`	`''`	Custom CSS class for the carousel wrapper.
`buttonClassName`	`string`	`''`	Custom CSS class for navigation buttons.
`totalSlide`	`number`	`1`	Total number of slides in the carousel.
`isIndicator`	`bool`	`false`	Whether to show navigation indicators.
`delay`	`number`	`3000`	Delay in milliseconds for automatic slide transitions.
`isButton`	`bool`	`true`	Whether to show navigation buttons.
`isButtonRounded`	`bool`	`false`	Whether navigation buttons should have rounded styles.

2. `CarouselItem`

A child component used to define each individual slide in the carousel.

Props

Prop Name	Type	Default	Description
`className`	`string`	`''`	Custom CSS class for the slide.

Usage

Here’s a basic example of how to use the Carousel and CarouselItem components:

import React from 'react';
import { Carousel, CarouselItem } from 'react-carousel-pro';

function App() {
  return (
    <Carousel
      className="custom-carousel"
      buttonClassName="custom-buttons"
      totalSlide={3}
      isIndicator={true}
      delay={5000}
      isButton={true}
      isButtonRounded={true}
    >
      <CarouselItem className="custom-slide">Slide 1 Content</CarouselItem>
      <CarouselItem className="custom-slide">Slide 2 Content</CarouselItem>
      <CarouselItem className="custom-slide">Slide 3 Content</CarouselItem>
    </Carousel>
  );
}

export default App;