I use a Bootstrap carousel to cycle through a series of D3 charts and tables, showing performance data for a specific team. After a plete cycle, the team input is toggled and the charts are reloaded for the newly-selected team.

The issue that I'm running into is that the data can take as long as 20 seconds to get to the client. As a result, the carousel often cycles before the first slide can load.

What I figured I'd do is wait until the data is available to start the carousel in the first place, and then essentially pause it at the end of a cycle, restarting it once the new data has loaded. To do so I'm calling $('.carousel').carousel({ interval: '10000' }) when the data bees available. This works fine on initial page load. However I need to pause the carousel before requesting data for the next team, and I can't seem to figure out how to do so. It appears as though setting $('.carousel').carousel({ interval: false }) has no effect.

Something to keep in mind is that I'd like to retain the carousel's manual slide controls and 'hover' pause behavior in between cycles.

Any help is appreciated.

UPDATE (sample code):

Original technique:

Markup:

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

Javascript:

Upon pletion of a cycle:

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

After each data reload:

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

Latest technique:

Markup:

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

Javascript:

Upon pletion of a cycle:

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

After each data reload:

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

Even with this technique it appears as though the carousel is changing after I remove it from the DOM. If I throw a debugger in at removal I can see that the .active slide is slide 1 of 5, yet when it gets reinserted it's at slide 2, 3, or sometimes 4. This carousel is something else...

I use a Bootstrap carousel to cycle through a series of D3 charts and tables, showing performance data for a specific team. After a plete cycle, the team input is toggled and the charts are reloaded for the newly-selected team.

The issue that I'm running into is that the data can take as long as 20 seconds to get to the client. As a result, the carousel often cycles before the first slide can load.

What I figured I'd do is wait until the data is available to start the carousel in the first place, and then essentially pause it at the end of a cycle, restarting it once the new data has loaded. To do so I'm calling $('.carousel').carousel({ interval: '10000' }) when the data bees available. This works fine on initial page load. However I need to pause the carousel before requesting data for the next team, and I can't seem to figure out how to do so. It appears as though setting $('.carousel').carousel({ interval: false }) has no effect.

Something to keep in mind is that I'd like to retain the carousel's manual slide controls and 'hover' pause behavior in between cycles.

Any help is appreciated.

UPDATE (sample code):

Original technique:

Markup:

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

Javascript:

Upon pletion of a cycle:

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

After each data reload:

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

Latest technique:

Markup:

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

Javascript:

Upon pletion of a cycle:

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

After each data reload:

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

Even with this technique it appears as though the carousel is changing after I remove it from the DOM. If I throw a debugger in at removal I can see that the .active slide is slide 1 of 5, yet when it gets reinserted it's at slide 2, 3, or sometimes 4. This carousel is something else...

• javascript
• jquery
• twitter-bootstrap

2 Answers 2

Look this (carousel \ Methods)

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Stop:

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

Start:

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