Question: I'm really confused about this. I have a reasonably dynamic page on a test site which uses Bootstrap's carousel (but I'm hoping it's my code, not theirs, that's wrong).

Test page can be found here: <http://bit.ly/ZjLl19>

What you'll notice is as follows...

* The page starts to load
* The staff portraits begin to appear
* Then... **nothing happens for about 5-10 seconds**
* After 5-10 seconds, a carousel appears with staff biographies and larger portraits

Why is there this delay? I've looked in Webkit debugger and I can just see idle time in the timeline whilst `DOMContentLoaded` runs, before anything else happens. Any ideas?

Thanks!

Answer: 
***Points to note:***

1) You paused your carousel on init. This may explain the initial pause. The carousel auto continues to the next slide, showing the subsequent slides after the default delay, [which apparently is 5000ms](http://twitter.github.com/bootstrap/javascript.html#carousel).

```
$('.carousel.paused-by-default').carousel('pause');

```

2) The paused carousel, after the initial pause, displays itself using this code:

```
info = setTimeout(function(){reveal_content();}, 500);

```

3) **[UPDATE - IGNORE FIRST TWO OBSERVATIONS]** 

THE CAROUSEL SEEMS TO BE STARTING FROM SLIDE **-1**. As there is no slide **-1**, the height of the carousel stays at `0px`. The height of the carousel ONLY updates to `560px` AFTER the first slide has completed it's animation. This is why there is no animation for the first slide, and it just seems to *pop* out of nowhere, after the default slide delay of 5000, PLUS additional animation speed of about one second (as mentioned in point #1). To fix this, use both solutions below.

====================================

***Ways that might help you fix the problem:***

1) Add this just before the closing bracket of `$(document).ready()` function, to display the first slide immediately:

```
$('.carousel').carousel(0);

```

2) If previous point did not completely solve the problem, set height of `#mtt-carousel` and `.carousel-inner` to 560px, add this before the previous JS statement in #1.

```
$('#mtt-carousel, .carousel-inner').css('height', '560px');

```

or CSS:

```
#mtt-carousel, .carousel-inner { height: 560px !important; }

```
It's actually an easy fix. Simply apply the active class to the first element to show it (Or which ever one you want to display first). Otherwise you're waiting until dom has loaded and the carousel has been initialised to do that for you.

So this below would do the trick and display the carousel immediately without having to wait for JS:

```
<div class="carousel-inner">
    <div class="item mtt-item active">...</div>
    <div class="item mtt-item">...</div>
</div>

```