'How to stop auto sliding of react-bootstrap carousel

By installing "npm i react-bootstrap". I added Below code in html. I have used interval="false" but it was not working. In bootstrap it working but not working in react "react-bootstrap". Please help me out

function ControlledCarousel() {
   const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };*strong text*

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=First slide&bg=373940"
          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="holder.js/800x400?text=Second slide&bg=282c34"
          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.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Third slide&bg=20232a"
          alt="Third slide"
        />

        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}
javascripthtmlreactjs


Solution 1:[1]

You need to pass interval={0} to Carousel.

Solution 2:[2]

You need to pass interval as 0. This can be done via interval prop, by setting as below. The default value is '5000'

<Carousel activeIndex={index} onSelect={handleSelect} interval={0}>

Solution 3:[3]

Using React-Bootstrap version 1 I had to set interval={null} as with 0 it was sliding non-stop.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Medi
Solution 2 Tushar
Solution 3 marcofriso

Related Questions