引导轮播图像不滑动或切换，控件（和指示器）也不起作用答案

【问题标题】：Bootstrap carousel images not sliding or switching and controls (& indicators) are also not working引导轮播图像不滑动或切换，控件（和指示器）也不起作用
【发布时间】：2015-03-06 15:35:44
【问题描述】：

我是 bootstrap 新手，但在使用轮播时遇到了问题。

图像没有滑动或切换，只是站在第一张图像中，并且控件，指示器也不起作用

我也是stackoverflow的新手，如果我的格式有误，请原谅。

代码如下：

头

    <head>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link href="css/full-slider.css" rel="stylesheet">
      <script src="js/bootstrap.min.js"></script>
      <script src="js/jquery.js"></script>
      <script language="JavaScript" type="text/javascript">
        $(document).ready(function() {
          $('.carousel').carousel({
            interval: 3000
          })
        });
      </script>
    </head>

身体

<div class="col-md-12" style="height:500px;">
  <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>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/img1.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="images/img2.jpg" alt="Chania">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="images/img3.jpg" alt="Flower">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beatiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </div>
</div>

我几乎解决了这个轮播给出的所有解决方案，但无法做到。

【问题讨论】：

标签： html twitter-bootstrap carousel

【解决方案1】：

检查 bootstrap.min.js 和 jquery.js 链接路径。否则尝试添加cdn链接

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

【讨论】：

谢谢它帮助了我。但我能知道为什么旧路径能正常工作
可能是文件名或链接路径不正确。 w3schools.com/bootstrap/bootstrap_get_started.asp

【解决方案2】：

我认为你需要像这样在 bootstrap.min.js 之前添加 jQuery：

<head>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link href="css/full-slider.css" rel="stylesheet">
      <script src="js/jquery.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script language="JavaScript" type="text/javascript">
        $(document).ready(function() {
          $('.carousel').carousel({
            interval: 3000
          })
        });
      </script>
    </head>

【讨论】：

我把你的建议绑定了，但问题没有得到解决。你能再做一次并帮助我吗，谢谢。

【解决方案3】：

在 bootstrap.min.js 之前添加 jQuery

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

【讨论】：

嘿，我尝试了上述解决方案，但问题没有得到解决。你能再做一次并帮助我。

【解决方案4】：

您在轮播脚本（脚本的第 4 行）中忘记了 ;

给你：

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
      $('.carousel').carousel({
        interval: 3000
      });
    });
  </script>

【讨论】：

我把你的建议绑定了，但问题没有得到解决。你能再做一次并帮助我吗，谢谢。