Carousel Component

[CodeRoadSoftwares]

Overview

In this task, you will implement a carousel component for the Tealthy frontend. The carousel should display a rotating set of banners, with each banner being an instance of the ImageBanner component located at frontend/src/components/Banners/ImageBanner.jsx.

Requirements

1. Carousel Component: Create a scrollable carousel component that displays a rotating set of banners.
2. ImageBanner Integration: Use the ImageBanner component to render each banner in the carousel.
3. Horizontal Scroll: Ensure that the carousel scrolls horizontally to navigate between banners.
4. Navigation Controls:
   • Implement optional previous and next buttons for manual navigation through the banners. This should be controlled by a prop.
   • Implement optional dots for navigation, where each dot represents a banner. This should also be controlled by a prop.
5. Responsiveness: Ensure that the carousel is responsive and works well on different screen sizes.
6. Props:
   • The carousel component should accept a banners prop, which is an array of objects representing each banner. Each object should have src, alt, and text properties.
   • Implement props for controlling the visibility of previous and next buttons (showButtons) and dots (showDots).

Implementation

1. Create a new component for the carousel (Carousel.jsx).
2. Use the ImageBanner component to render each banner inside the carousel.
3. Implement horizontal scrolling for the carousel.
4. Add optional props for controlling the visibility of previous and next buttons and dots.

Example Usage

import React from 'react';
import { Carousel } from 'tealthy-carousel';
import ImageBanner from './components/Banners/ImageBanner';

const banners = [
  { src: 'banner1.jpg', alt: 'Banner 1', text: 'Welcome to Tealthy!' },
  { src: 'banner2.jpg', alt: 'Banner 2', text: 'Book your appointment today!' },
  { src: 'banner3.jpg', alt: 'Banner 3', text: 'Meet our experienced doctors.' },
];

function App() {
  return (
    <Carousel banners={banners} showButtons={true} showDots={true}>
      {banners.map((banner, index) => (
        <ImageBanner key={index} src={banner.src} alt={banner.alt} text={banner.text} />
      ))}
    </Carousel>
  );
}

export default App;

[CodeRoadSoftwares]

11