实现twitter bootstrap carousel v2.3.2

Question

我在实现bootstrap轮播时遇到了麻烦.任何人都可以看看下面的html和js,并给我如何实现幻灯片的说明..js尚未编辑,旋转木马安装在正文英雄单元上.我是否实施了旋转木马api？如何在.js文件中定义我正在使用的轮播？谢谢.

<div class="carousel">

  <!-- Carousel items -->
  <div class="carousel-inner">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </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>

Answer 1

注意:这个答案最初是针对Bootstrap 2.3.2的(可能不适用于版本3)

您必须在所有幻灯片上放置"item"类,并在第一张幻灯片上将该类设置为"active".这对我有用.

<div class="carousel">
  <div class="carousel-inner">


<!-- your slide -->

     <div class="hero-unit item active">
                <h1>Hello, world!</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
     </div> 

  </div>
</div>

和克里斯托弗一样,你需要使用这个功能来启动它.

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>

Answer 2

我的理解是

<div class="carousel">

需要是

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

其中id是"Arrows"'href的任何内容.

Answer 3

Bootstrap Carousel 的文档可在此处找到：http ://twitter.github.com/bootstrap/javascript.html#carousel

我想你需要添加这样的东西才能让它运行：

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>