#reactjs #react-bootstrap
Вопрос:
Моя карусель 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>
);
}
Ответ №1:
Причина в том, что вы наводите курсор мыши на изображение во время его отображения, что приведет к тому, что ваша карусель будет прилипать к этому изображению независимо от интервала. Как только вы уберете мышь, карусель переключится на следующее изображение.
Комментарии:
1. Похоже, что так оно и было! Я добавил pause={false} в карусель. Спасибо!