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幻灯片是幻灯片1中的第1个幻灯片，但是当它被重新插入时，它位于幻灯片2,3或有时4.这个轮播是其他的... < / p>

Answer 1

Look this (carousel \ Methods)

.carousel('cycle')

从左到右循环播放轮播项目。

.carousel('pause')

停止旋转木马穿过物品。

.carousel(number)

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

.carousel('prev')

循环到上一个项目。

.carousel('next')

循环到下一个项目。

Answer 2

停止：

$("#carouselExample").attr('data-interval', '0');

开始：

$("#carouselExample").attr('data-interval', '9000');

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

2 个答案: