Question

所以这里是百万问题的另一个例子，询问为什么Bootstrap的旋转木马不起作用。据我所知，没有其他人和我有同样的问题。你可能不相信我，也许我也不完全相信自己。无论如何，这里也是。

所以我的代码是来自Bootstrap's carousel example的文字副本和粘贴，其中包含一些细微的更改。随意将粘贴复制到您自己的html文件中并查看它。我已经包含了Bootstrap的css和javascript，我已经包含了jquery，并且我已经初始化了我的轮播。左右按钮的具体功能是什么。他们预期的行为是循环每个项目div中的图像，但实际发生的事情是什么都没有。从示例的页面源代码复制后，轮播无法正常工作，并且在我进行更改后，它无法正常工作。

作为一个注释，我确实看到了有关通过file：// URL查看页面的警告，并且代码在托管到S3存储桶时也不起作用。

首先要指出为什么我愚蠢得到免费积分！

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Carousel Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <script>
    $(function(){
      $('#myCarousel').carousel();
    });
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  </head>
  <body>
    <!-- Carousel
    ================================================== -->
    <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>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="http://www.mountainprofessor.com/images/Mountain-Ranges-Colorado-2.jpg" alt="First slide" style="width:100%;height:500px;">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="http://7-themes.com/data_images/out/50/6943013-mountain-lake.jpg" alt="Second slide" style="width:100%;height:500px">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Example text.</p>
            </div>
          </div>
        </div>
      </div>
      <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>
    </div><!-- /.carousel -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(function(){
      $('#myCarousel').carousel();
    });
    </script>
  </body>
</html>

＆＃13;

Answer 1

检查浏览器控制台

你看到

Uncaught Error: Bootstrap's JavaScript requires jQuery

看起来它没有加载Jquery 1st

脚本的顺序应该是这样的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Bootstrap carousel prev / next按钮无响应

1 个答案: