Блог

Моя карусель React-Bootstrap иногда застревает на втором изображении в течение длительного времени, хотя у меня есть набор интервалов {1500} .

Это происходит независимо от того, какое изображение я там использую. Есть какие-нибудь идеи?

 function Work() {

  return (
    <Carousel fade indicators={false} controls={false} >

       {/* provides brief period with no image. */}
       <Carousel.Item interval={200}></Carousel.Item>

      <Carousel.Item interval={1500}>
        <img className="d-block w-100" src={news} alt="News Flash" />
      </Carousel.Item>

      <Carousel.Item interval={5000}>
        <img
          className="d-block w-100"
          src={newsBlur}
          alt="News Flash blurred"
        />
        <Carousel.Caption style={styles.carouselCaption}>
          <h3>
            News Flash gathers news based on the user's
            news category preferences.
          </h3>
          <h3>
            <a
              href="https://github.com/Xr7TSi/News-Flash"
              className="btn btn-primary"
              style={styles.buttonPrimary}
            >
              <h5>See the repo</h5>
            </a>
          </h3>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
    
  );
}
 

Причина в том, что вы наводите курсор мыши на изображение во время его отображения, что приведет к тому, что ваша карусель будет прилипать к этому изображению независимо от интервала. Как только вы уберете мышь, карусель переключится на следующее изображение.