如何在 Bootstrap 轮播结尾加载 JS 脚本？答案

【问题标题】：How can I load a JS script on Bootstrap carousel ending?如何在 Bootstrap 轮播结尾加载 JS 脚本？
【发布时间】：2019-10-06 22:21:34
【问题描述】：

我正在使用带有通过 AJAX 调用加载的幻灯片的 Bootstrap 轮播。

问题是在每个循环之后，我都会进行新的调用来更新轮播的元素。到目前为止，一切都很好。问题是，一旦整个周期结束，如何调用脚本？

如果我有 10 张幻灯片，每张幻灯片的间隔为 5 秒，则应在加载第 10 张幻灯片后 5 次调用。我检查了引导程序文档，我想它应该以某种方式使用事件“slid.bs.carousel”，但不知道如何在最后一张幻灯片中触发它。

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-4

【解决方案1】：

我认为这应该会有所帮助：

$('.carousel').on('slide.bs.carousel', function ( data ) {
  var lastSlide = $('.carousel-item').length;
  if( data.to == lastSlide ) {
    //ajax
  }
});

其中data.to 是下一项的索引。

【讨论】：

您的代码方向正确，但有一些错误。我的亮点是您实际上可以访问作为幻灯片对象的数据。我不知道。错误是最后一张幻灯片的长度为 1，而事件是“slid.bs.carousel”，它发生在转换之后，否则您无法暂停循环。对我来说，这是一个赞成票，因为它为我提供了关键要素，但不是正确的解决方案。

【解决方案2】：

这就是解决方案。需要注意的是：

a) 为了应用更改，我们需要等待过渡结束。因此，我们使用了 'slide.bs.carousel' 而不是 'slide.bs.carousel'

b)关键的见解是您可以访问数据中的幻灯片属性

  $('.carousel').on('slid.bs.carousel', function ( data ) {
  var lastSlide = $('.carousel-item').length - 1;
  if( data.to == lastSlide ) {
    $(".carousel").carousel("pause");
    console.log("PAUSE"); // Here comes your code
  }
});

【讨论】：

没有描述的仅代码答案被标记为低质量；请添加描述以分享您所做的事情
你是对的。很抱歉，感谢您的友好反馈。