carousle-tess-lib20

CARD: Card 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. Usage: 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;