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

Question

即使我的间隔设置为{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>
    
  );
}

Answer 1

原因是您在显示图像时将鼠标悬停在图像上，这将导致您的 Carousel 粘在该图像上，而不管时间间隔如何。将鼠标移开后，轮播将切换到下一个图像。