tess-carousle-lib
v1.0.0
Published
Carousel: 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. Usage: import { CarouselDots ,CarouselArrows } from "carousle-te
Downloads
1
Readme
Carousel: 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. 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;