Carousel Component

Overview

The Carousel component is a slideshow banner that displays a sequence of images with optional navigation arrows and dots. It provides a visually appealing way to showcase content, such as banners or featured products.

Usage

import { Carousel } from 'component-library-coffvart-app';

const BannerSlider = () => {
  const images = [
    'image-url-1.jpg',
    'image-url-2.jpg',
    'image-url-3.jpg',
    // Add more image URLs as needed
  ];

  return (
    <Carousel
      images={images}
      autoPlay={true}
      autoPlayInterval={3000}
      showArrows={true}
      showDots={true}
    />
  );
};

Component Properties

SliderProps

The Carousel component accepts the following properties:

| Property | Type | Description | Required | Default Value | | ------------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- | | images | string[] | An array of URLs representing the images to be displayed in the slider. | Yes | - | | autoPlay | boolean | Enables or disables automatic slideshow playback. | No | true | | autoPlayInterval | number | The time interval (in milliseconds) between automatic slide transitions. Applicable only when autoPlay is set to true. | No | 1000 | | showArrows | boolean | Indicates whether navigation arrows should be displayed. | No | true | | showDots | boolean | Indicates whether navigation dots (indicators) should be displayed. | No | true | | colors | string[] | An array of colors to be used for the navigation arrows and dots. | No | ['#103b58', '#adbed3'] |

Component Details

Image Transition

• The component smoothly transitions between images.
• Images can be navigated manually using arrows or dots.

Automatic Slideshow

• When autoPlay is set to true, the slider automatically transitions between images at the specified interval (autoPlayInterval).

Navigation Arrows

• Arrow buttons (FaChevronLeft and FaChevronRight) allow manual navigation to the previous or next image.

Navigation Dots

• Dots at the bottom of the slider indicate the number of images and the currently displayed image.
• Clicking on a dot navigates to the corresponding image.

Examples

Basic Slider

<Carousel images={['image-url-1.jpg', 'image-url-2.jpg', 'image-url-3.jpg']}/>

Slider with Options

<Carousel
    images={['image-url-1.jpg', 'image-url-2.jpg', 'image-url-3.jpg']}
    autoPlay={true}
    autoPlayInterval={3000}
    showArrows={true}
    showDots={true}
/>

Slider without Arrows

<Carousel images={['image-url-1.jpg', 'image-url-2.jpg', 'image-url-3.jpg']} showArrows={false} />

Slider without Dots

<Carousel images={['image-url-1.jpg', 'image-url-2.jpg', 'image-url-3.jpg']} showDots={false}/>