Question

我正试图从Bootstrap指南中获取示例轮播代码，以便在我的主页上工作，出于某种原因，我的主页最终会在顶部显示所有主页内容（左箭头和右箭头）和所有主页内容再次在它下面（也有左右箭头）。单击左箭头和右箭头只会滚动到顶部内容和底部内容。

我按顺序包含了bootstrap.js和jquery.js。什么可能出错？以下是相关的HTML代码：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner"> 
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
       </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

<div>
        <img class="banner" src="/images/dataimage.jpg">
</div>
<div class="container wrapper">
    <div class="jumbotron   ">
        <h1>moocRP</h1>

        <h2>...under development</h2>
        <a href="/user/login" class="btn btn-lg btn-success">Login now!</a>
    </div>
</div>

Answer 1

我按顺序包含了bootstrap.js和jquery.js。

尝试相反的方式：）

Answer 2

我认为你错过了一个div class =＆＃34; container＆＃34;

  <!-- Wrapper for slides -->
<div class="carousel-inner"> 
<div class="item active">
  <img src="..." alt="...">
   <div class="container"> <!--THIS ONE-->
  <div class="carousel-caption">
    ...
   </div>
</div>
</div>
...

Answer 3

我不明白你的问题是什么。您发布的代码工作正常左右箭头没有错误

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

我使用了ff：jQuery 1.9.1 Bootstrap.js，Bootstrap.css 看看http://jsfiddle.net/programmer101/j9bPF/

Answer 4

检查每个项目div是否也没有应用'active'类！

我用它复制了第一张幻灯片，很困惑为什么幻灯片在彼此之上重复。

：）

Twitter Bootstrap Carousel：幻灯片全部同时显示

4 个答案: