import React, { useState } from 'react';
import Carousel from 'react-bootstrap/Carousel';
function ControlledCarousel() {
const [index, setIndex] = useState(0);
const [direction, setDirection] = useState(null);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
setDirection(e.direction);
};
return (
<Carousel
activeIndex={index}
direction={direction}
onSelect={handleSelect}
interval={null} // Set interval to null to stop autoplay
>
<Carousel.Item>
<img
className="d-block w-100"
src="..."
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="..."
alt="Second slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
export default ControlledCarousel;