如何在 bootstrap 5 中暂停轮播

Question

我正在尝试单击暂停 Bootstrap 5 轮播的按钮。

暂停无效。

我有一个 Code Pen Example 并重复了下面的代码。

document.getElementById("btnPause").addEventListener("click", function () {
  var carouselElement = document.getElementById("carouselAnimals");
  var carousel = new bootstrap.Carousel(carouselElement);
  carousel.pause(); // seems to get called, but doesn't pause

  // carousel('pause'); // doesn't work
  // carousel.carousel('pause'); // doesn't work
});

<div class='container'>
  <div class="container">
  <div class="row">
    <div class="col-3">
      <button id='btnPause' class="btn btn-secondary">Stop carousel</button>
    </div>
    <div class="col">
            <div id="carouselAnimals" class="carousel slide" data-bs-ride="carousel" data-bs-interval='1000' data-interval='100' >
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://placekitten.com/800/500" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="https://loremflickr.com/800/500" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="http://placeimg.com/800/500/animals" class="d-block w-100" alt="...">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我猜你尝试的方式会导致两个不同的轮播实例。

你看到的滚动条是由bootstrap
你按下按钮时创建的第二个

但是第二个没有在任何地方渲染。

所以为了让它停止，在按下按钮之前自己初始化它：

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();
});

工作示例（JSFiddle，抱歉没有 codepen 帐户）： https://jsfiddle.net/y5z98xfe/

如何在 bootstrap 5 中暂停轮播

How to pause carousel in bootstrap 5

javascript

bootstrap-5