javascript - 使用 Javascript 或 jQuery 启动和停止 Bootstrap 轮播

Question

我使用 Bootstrap 轮播循环浏览一系列 D3 图表和表格，显示特定团队的绩效数据。一个完整的循环后，团队输入被切换，图表为新选择的团队重新加载。

我遇到的问题是数据可能需要长达 20 秒才能到达客户端。因此，轮播通常会在第一张幻灯片加载之前循环。

我想我要做的是等到数据可用时首先启动轮播，然后在循环结束时暂停它，在新数据加载后重新启动它。为此，我在数据可用时调用 $('.carousel').carousel({ interval: '10000' })。这在初始页面加载时工作正常。但是，在为下一个团队请求数据之前，我需要暂停轮播，而且我似乎不知道该怎么做。似乎设置 $('.carousel').carousel({ interval: false }) 没有效果。

要记住的是，我想保留轮播的手动滑动控件和循环之间的“悬停”暂停行为。

感谢任何帮助。

更新(示例代码):

原创技术:

标记:

<div
  id="carousel"
  class="carousel slide"
  data-ride="carousel"
  data-interval="30000"
  data-pause="hover"
 >
  <div class="carousel-inner">
    <div class="item active">
      ...

Javascript:

一个周期完成后:

toggleTeams()
Session.set 'loading', true // show loading overlay

每次数据重新加载后:

Session.set 'loading', true // show loading overlay
if ticketSubscriptionHandle.ready() // wait for data to be ready
  Session.set 'loading', false // hide loading overlay
  drawCharts() // redraw charts

最新技术:

标记:

<div
  id="carousel"
  class="carousel slide"
 >
  <div class="carousel-inner">
    <div class="item active">
      ...

Javascript:

一个周期完成后:

carousel = $('.carousel')
carousel.detach() //remove the carousel from the DOM to stop the cycle while data loads
toggleTeams()
Session.set 'loading', true // show loading overlay

每次数据重新加载后:

Session.set 'loading', true // show loading overlay
if ticketSubscriptionHandle.ready() // wait for data to be ready
  if isFirstLoad
    $('.carousel').carousel(interval: '2000') // start the carousel
    isFirstLoad = false
  else
    $('.container-fluid').append(carousel) // drop the carousel back in
  Session.set 'loading', false // hide loading overlay
  drawCharts() // redraw charts

即使使用这种技术，在我将轮播从 DOM 中删除后，轮播似乎也在发生变化。如果我在删除时放入调试器，我可以看到 .active 幻灯片是 5 张幻灯片中的第 1 张，但当它重新插入时，它位于第 2、3 或有时第 4 张幻灯片。这个旋转木马是另外一回事...

Answer 1

Look this (carousel \ Methods)

.carousel('cycle')

从左到右循环轮播项目。

.carousel('pause')

阻止轮播在项目之间循环。

.carousel(number)

将轮播循环到特定帧(基于 0，类似于数组)。

.carousel('prev')

循环到上一个项目。

.carousel('next')

循环到下一个项目。