tess-carousle-lib4

Carousel Component

Carousel is a JavaScript library for creating user interfaces.It can be used as react component . It is typically used together with a React renderer like react-dom for the web.

React Carousel Components

This project includes two React components for creating a carousel with dots for navigation and arrow buttons to switch between slides.

CarouselDots

The CarouselDots component displays a set of dots to represent different slides in a carousel. It is used for navigation between slides in the carousel. The component accepts the following props:

• totalSlides: The total number of slides in the carousel.
• currentSlide: The currently active slide.
• onClick: A callback function to handle click events on the dots.

import React from "react";
import CarouselDots from "./CarouselDots";



// Example usage
<CarouselDots totalSlides={3} currentSlide={0} onClick={handleDotClick} />


import { CarouselDots ,CarouselArrows } from "carousle-tess-lib20";
function App() {
const image1 = require("../carousel/image1.jpg");
const image2 = require("../carousel/image2.jpg");
const image3 = require("../carousel/image3.jpg");

const images = [image1, image2, image3];
const totalSlides = images.length;

    const handleDotClick = (index) => {
    	setCurrentSlide(index);
    };

const imageWidth = "200px";
const imageHeight = "150px";

return (

            <div>
    			<h1>Carousel Sample </h1>
                <div>
    		<h4>Carousel Arrows</h4>
    		<CarouselArrows images={images} />
    	</div>
            <div>
    		<h4>Carousel Dots</h4>
    		<img
    			src={images[currentSlide]}
    			alt={`Slide ${currentSlide + 1}`}
    			style={{ width: imageWidth, height: imageHeight }}
    		/>
    		<CarouselDots
    			totalSlides={totalSlides}
    			currentSlide={currentSlide}
    			onClick={handleDotClick}
    		/>
    	</div>
    		</div>

)};

export default App;