javascript - 如何关闭 React Bootstrap Carousel 的自动播放？

Question

我无法将 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 在图像中循环得更快。以上是我尝试的最后一种方法，但它再次不起作用，相反它循环得更快。

如有任何帮助，我们将不胜感激!

Answer 1

interval 的类型为number，默认为5000

自动循环项目之间延迟的时间量。如果null，轮播将不会自动循环。

interval={null}