Bootstrap 轮播图片无法滑动或切换，控件（和指示器）也无法正常工作

Question

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

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

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

代码如下：

头

    <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>

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

Answer 1

在bootstrap.min.js

之前添加jQuery

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

Answer 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>

Answer 3

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

给你：

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

Answer 4

检查 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>

Bootstrap 轮播图片无法滑动或切换，控件（和指示器）也无法正常工作

Bootstrap carousel images not sliding or switching and controls (& indicators) are also not working

html

carousel

twitter-bootstrap

头

正文