Question

我似乎无法使用Bootstrap 3旋转木马来转动图像。似乎没有任何效果。这最初是在CodePen中完成的，但是将其全部移动到文本编辑器中。我已经到处寻找答案......

这是结果......任何想法？

<!DOCTYPE html>

<body>


  <div id="carousel-home" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-home" data-slide-to="1"></li>
      <li data-target="#carousel-home" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/flower-21.jpg">
        <div class="carousel-caption">
          <h3>Flower 1</h3>
        </div>
      </div>
      <div class="item">
        <img src="img/flower12.jpg">
        <div class="carousel-caption">
          <h3>Flower 2</h3>
        </div>
      </div>
      <div class="item">
        <img src="img/flowers3.jpg">
        <div class="carousel-caption">
          <h3>Flower 3</h3>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-home" 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="#carousel-home" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>

JSFiddle

Answer 1

确保包含bootstrap.min.js和jquery个库，以便轮播工作。

请参阅此fiddle（展开“外部资源”标签）

Bootstrap轮播文档为here

Answer 2

作为您提供的JSFiddle，您缺少bootstrap Javascript库（bootstrap.js）

使用bootstrap文档时的提示，如果您在coffee标签中看到任何内容，则需要Javascript！

Bootstrap 3轮播无法正确显示或更改图像

2 个答案: