javascript - 如何停止 react-bootstrap 轮播的自动滑动
问题描述
通过安装“npm i react-bootstrap”。我在 html 中添加了下面的代码。我使用了 interval="false" 但它不起作用。在引导程序中它可以工作,但不能在反应“react-bootstrap”中工作。请帮帮我
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>
);
}
解决方案
你需要传递interval={0}
给Carousel
.
推荐阅读
- javascript - 使用容器的多个实例时 ID 重复
- javascript - vue js 可以将带有查询的路由转到组件吗?
- javascript - Laravel 应用程序,在浏览器上按回时交换帐户
- google-api - Google Drive Access - 服务帐户或 OAuth - 读取/写入用户文件
- html - 在 CSS3 中从中心转换 HTML 元素
- html - HTML 代码:在哪里可以找到页面标题的字体和颜色
- oracle - 使用来自 python 的 subprocess.call 包含转义字符
- c# - 在 C# 中使用正则表达式在需要时插入空格
- unity3d - JetBrains Rider 没有从 Unity 捕获 ArgumentOutOfRange 异常
- html - 应用于网页上断开的链接的标准样式