我无法将 React Bootstrap 的 Carousel 设置为不自动播放。
这是我现在的代码:
import React from 'react';
import Carousel from 'react-bootstrap/Carousel';
import pigment1 from '../images/design-images/pigment/page1.jpeg';
import pigment2 from '../images/design-images/pigment/page2.jpg';
import pigment3 from '../images/design-images/pigment/page3.jpg';
import './DesignProjects.css';
function DesignProjects(props) {
return (
<section>
<h2>Design Work</h2>
<div className='design-project'>
<h3>Pigment Website Redesign</h3>
<Carousel interval={false}>
<Carousel.Item>
<img className='d-block w-100' src={pigment1} alt='First slide' />
</Carousel.Item>
<Carousel.Item>
<img className='d-block w-100' src={pigment2} alt='Third slide' />
</Carousel.Item>
<Carousel.Item>
<img className='d-block w-100' src={pigment3} alt='Third slide' />
</Carousel.Item>
</Carousel>
</div>
</section>
);
}
export default DesignProjects;
根据我的阅读,我需要将间隔设置为 false...但是我尝试这样做的每一种方式都导致出现错误或 Carousel 在图像中循环得更快。以上是我尝试的最后一种方法,但它再次不起作用,相反它循环得更快。
如有任何帮助,我们将不胜感激!
最佳答案
interval 的类型为number,默认为5000
自动循环项目之间延迟的时间量。如果null,轮播将不会自动循环。
interval={null}
关于javascript - 如何关闭 React Bootstrap Carousel 的自动播放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66110845/