Question

I’m playing with backbone.js and I’m looking at abusing the bootstrap-carousel plugin to make view transitions a bit more shiny.

When transitioning from an item containing a table to another item the slide proceeds nicely. However, when transitioning to a table, the table does not appear until after the slide has completed.

See this jsFiddle for a demo.

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
      <table class="table table-bordered table-striped">
        <tr>
          <th>Key</th>
          <th>Value</th>
        </tr>
        <tr>
          <td>bootstrap</td>
          <td>Awesome</td>
        </tr>
      </table>
    </div>
    <div class="item">Second</div>
    <div class="item">Third</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>​

$('.carousel').carousel({
  interval: false
});​

Is this something I’m doing wrong, an inevitable consequence of how these transitions work or a small bug with bootstrap?

(Reproducible in Chrome 21 & 22, Firefox 14 and Safari 5.1.7)

Screenshot:

Answer 1

How about if you set the height of the .carousel-inner to the same height as your #myCarousel?

http://jsfiddle.net/9ga5t/

#myCarousel, 
.carousel-inner {
  height: 300px;
}