bootstrap旋转木马奇怪的行为与第一张幻灯片是空白，并点击2激活导航

Question

我使用从那里的引导演示网站。

但是，当我将其与标记一起使用时，首先会出现空白幻灯片。有标记是从我的来源采取的，我找不到任何问题。我把音源放在小提琴上，发生同样的事情。

这怎么会发生，为什么我的标记是相同的演示。

请看这个小提琴来体验这个问题。 http://jsfiddle.net/aVBUy/3/

这是我的标记......

<div id="myCarousel" class="carousel slide"> 

    <div class="carousel-inner"> 

     <div class="item" style="background-image: url('riders-carousel-011.jpg');"> 
      <img src="wp/wp-content/themes/riders-experience/images/x.gif" alt="" /> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h1>Riders for Health</h1> 
        <p class="lead">Riders Experience Africa is more than just a holiday&#8230; 
It is a unique chance to see the work of Riders for Health and to learn about how motorcycles are helping&hellip;</p> 
        <a class="btn btn-large btn" href="riders-for-health/">Veiw more information</a> 
       </div> 
      </div> 
     </div> 

     <div class="item" style="background-image: url('riders-carousel-02.jpg');"> 
      <img src="wp/wp-content/themes/riders-experience/images/x.gif" alt="" /> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h1>Rider Check List</h1> 
        <p class="lead">Motorcycle helmet Full face or open face. A motocross or enduro style helmet is a better choice. These are specifically designed for off-road use and have particular&hellip;</p> 
        <a class="btn btn-large btn" href="rider-check-list/">Veiw more information</a> 
       </div> 
      </div> 
     </div> 

    </div> 

    <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> 

帮助将是巨大的，因为我会有点疯狂。我究竟做的演示展示了（我希望）

感谢

Answer 1

我认为你必须与jQuery的$('..').carousel()先初始化它，或者只是添加类“活动”的第一个项目..

更新提琴：http://jsfiddle.net/skelly/aVBUy/5/