Javascript 如何在bootstrap 5中暂停旋转木马

我正在尝试单击一个按钮来暂停引导5转盘

暂停不起作用

我有一个问题，并且重复了下面的代码

document.getElementById（“btnPause”）.addEventListener（“单击”，函数）（）{
var carouselement=document.getElementById（“carouselAnimals”）；
var carousel=新引导.carousel（carouselement）；
carousel.pause（）；//似乎被调用，但没有暂停
//旋转木马（‘暂停’；//不起作用
//carousel.carousel（'pause'）；//不起作用
});

停止传送带

我猜您尝试的方式会导致两个不同的旋转木马实例

您看到的滚动是由引导程序自动创建的

按下按钮时正在创建的第二个

但是，第二个场景不会在任何地方渲染

因此，为了使其停止，请在按下按钮之前自己对其进行初始化，如下所示：

var carouselElement = document.getElementById("carouselAnimals");

/* it looks like manually initialising the carousel
   will overwrite html data-attributes, so you have to
   specify properties when creating the slider */

var carousel = new bootstrap.Carousel(carouselElement, {
  interval: 100
});

document.getElementById("btnPause").addEventListener("click", function () {
  carousel.pause();
});

工作示例（JSFIDLE，很抱歉，您没有codepen帐户）：

---

您可以在每次单击按钮时进行实例化。简而言之，您的“点击”和“新建旋转木马”的顺序应该是相反的。拥有实例后附加单击事件。就像下面的答案一样。谢谢@Hoargarth，我想这个问题可能与类似的事情有关，我在网上看到了这样的例子，但我会去修改我的代码，然后再回复你。