React-Bootstrap Carousel 偶尔会卡在第二张图片上

问题描述

我的 React-Bootstrap Carousel 偶尔会长时间停留在第二张图像上，即使我有一个 {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>
    
  );
}

解决方法

原因是因为您在显示图像时将鼠标悬停在图像上，这会导致您的 Carousel 粘在该图像上，而不管时间间隔如何。将鼠标移开后，Carousel 将移至下一张图像。