Question

我正在尝试使用bootstrap 3创建一个图像轮播。图像将在一段时间后自行滑动，但我无法让控件滑动图像。好像我正在完全遵循文档。我已经包含了HTML以及一个jsfiddle：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <body>
   <nav class="navbar navbar-default navbar-fixed-top"><a class="navbar-brand">Test</a></nav>
<div class="container">
  <div class="row">
    <div style="height:100px;" class="col-md-12"></div>
  </div>
</div>
<div style="border-right:1px solid #E7E7E7;" class="container listingContainer">
  <div style="border-top:1px solid #E7E7E7;border-bottom:1px solid #E7E7E7;" class="row">
    <div class="col-md-5 leftAdjust">
      <div id="myCarousel" data-ride="carousel" class="carousel-slide">
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <div role="listbox" class="carousel-inner">
          <div class="item active"><img src="http://www.nationalparks.nsw.gov.au/~/media/NPWS/Images/Parks/Yuraygir-National-Park/Background/pebbly-beach-camp.ashx" style="width:100%;height:327px"></div>
          <div class="item"><img src="http://static.hdw.eweb4.com/media/thumbs/1/111/1101776.jpg" style="width:100%;height:327px"></div>
        </div><a href="#myCarousel" role="button" data-slide="prev" class="carousel-control left"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a><a href="#myCarousel" role="button" data-slide="next" class="carousel-control right"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
      </div>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="/javascripts/main.js"></script>

Answer 1

你有一个错字。

<div id="myCarousel" data-ride="carousel" class="carousel-slide">

应该是：

<div id="myCarousel" data-ride="carousel" class="carousel slide">

课堂上的旋转木马和幻灯片之间有一个连字符。

<强> FIDDLE

bootstrap 3轮播的控件不起作用

1 个答案: