carousel - react-bootstrap 如何控制轮播设置、控件、指示器、自动旋转、间隔时间

Question

所以问题很简单:如何传递变量来管理轮播(react-bootstrap)中的设置？ 我想传递(参数/ Prop /状态)，以便能够通过传递 Prop 来动态显示/隐藏下一个上一个按钮、自动播放、两张幻灯片之间的时间间隔等(就像在常规引导轮播中所做的那样)通过添加 html 或通过 CSS 隐藏它来完成，这是 imao 2010 解决方案)。任何想法？

这是我的代码，取自:here 。不幸的是，文档很差(或者用户界面很差，所以我无法找到更详细的文档。)

代码:

 <Carousel>

  <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>

  /* and so on,  next item, next item, etc... */

</Carousel>

Answer 1

尝试了一些解决方法并花了几个小时将 Carousel React-Bootstrap 与 Carousel Bootstrap 本身进行比较后，我得到了在 React-Bootstrap 中工作的解决方案:

 <Carousel
    autoPlay={true}
    interval={5000}
    controls={false}
    indicators={false}
  >

现在您唯一应该做的就是使这些 true/false 来自您的 json/config/props 以便以编程方式进行更改。注意“间隔”是以毫秒为单位的值(例如:5 秒帧为 5000)。

我希望这个解决方案可以帮助别人，就像我希望它在我问问题时对我有帮助一样:) 干杯!