bookstrap carousel 取消自动轮播 手动切换

要取消 Bootstrap Carousel 的自动轮播并改为手动切换，需要使用 JavaScript 进行一些编程。

以下是实现步骤：

1. 在 Carousel 的 HTML 标签中添加 data-interval="false" 属性，以禁用自动轮播。

2. 针对每个 Carousel 实例，使用 JavaScript 获取该 Carousel 的 ID，然后使用 jQuery 在 Carousel 上绑定 slide.bs.carousel 事件，该事件会在 Carousel 的幻灯片切换时触发。

3. 在 slide.bs.carousel 事件的回调函数中，使用 jQuery 获取当前 Carousel 的 active 幻灯片索引和下一个幻灯片索引，然后根据这些索引获取相应的控制按钮（prev 和 next），并将它们的 disabled 属性设置为 false，这样用户就可以手动切换幻灯片了。

下面是一个示例代码，可以帮助你更好地理解如何实现手动切换：

HTML:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <<div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

JavaScript:

$(document).ready(function() {
  $('#carouselExampleControls').on('slide.bs.carousel', function (e) {
    var active = $(e.target).find('.carousel-item.active');
    var next = e.relatedTarget;
    var prevControl = $(this).find('.carousel-control-prev');
    var nextControl = $(this).find('.carousel-control-next');
    
    if(next.classList.contains('carousel-item-left') && active.index() === 0) {
      prevControl.prop('disabled', true);
      nextControl.prop('disabled', false);
    } else if(next.classList.contains('carousel-item-right') && active.index() === $(this).find('.carousel-item').length - 1) {
      prevControl.prop('disabled', false);
      nextControl.prop('disabled', true);
    } else {
      prevControl.prop('disabled', false);
      nextControl.prop('disabled', false);
    }
  });
});

在这个示例代码中，我们使用了 jQuery 来监听 slide.bs.carousel 事件，并在回调函数中根据当前幻灯片索引和下一个幻灯片索引来启用或禁用控制按钮。当幻灯片处于最左侧或最右侧时，我们禁用相应的控制按钮，以避免切换到不存在的幻灯片。否则，我们启用所有控制按钮，以允许用户手动切换幻灯片。

希望这个示例代码能够帮助你实现 Bootstrap Carousel 的手动切换。