Question

我的旋转木马不能正常旋转木马。我不是哪个问题

我在github中的代码是

https://github.com/Mangulomx/campeonato-frontend

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

index.html文件

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

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="/ribbit/img/1.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="/ribbit/img/2.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="/ribbit/img/3.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="/ribbit/img/4.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

Answer 1

您缺少图像的左右控件。

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-      slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

那些属于你的'slide div'结束标记后。

此外，您还需要为bootstrap css链接添加链接，以便更轻松地将其粘贴到html doc的“head”部分。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

之后你应该好好去！如果您想要参考，我从http://www.w3schools.com/bootstrap/bootstrap_carousel.asp获得了大部分信息。

bootstrap carousel不制作滑块

1 个答案: