Question

我在我的网站上与Bootstrap轮播争吵。我按照说明在这里寻找答案，我仍然卡住了，似乎我所做的一切都很好..但它显然不是！我的旋转木马不工作了。为什么它不起作用？

我已经坐了这么久而无处可去，所以我真的很感谢你的帮助。

非常感谢！

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Hello World!</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Catamaran:300,400,100' rel='stylesheet' type='text/css'>

<script src="js/bootstrap-carousel.js"></script>


<script type="text/javascript">

$(document).ready(function() {
    $('#myCarousel').carousel({
    //options here
    });
});

</script> 
    <!-- Custom styles for this template go here -->

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    </head>

    <body>

        <div class="nav">

            <div class="logoimg">

                <img src="img/logo3.png">


            </div>

            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="about.html">About</a>
                </li>
                <li><a href="faq.html">FAQ</a>
                </li>
                <li><a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>


        <!-- Carousel -->

        <div id="carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="img/slide1.jpg" alt="Slide 1">
                </div>

                <div class="item">
                    <img src="img/slide2.jpg" alt="Slide 2">
                </div>

                <div class="item">
                    <img src="img/slide3.jpg" alt="Slide 3">
                </div>
            </div>


            <!-- Controls -->
            <a class="left carousel-control" href="#carousel" 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="#carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


        <!-- Carousel End-->


    </body>

    </html>

Answer 1

非常简单地说，你没有包含jQuery库。以下是错误控制台显示：

ReferenceError: $ is not defined

10次中有9次可以通过在文档的head中加载jQuery来解决这个问题。像这样：

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:300,400,100' rel='stylesheet' type='text/css'>
<!-- This is the important part -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

从本质上讲，vanilla javascript不知道这段代码的含义，因为它特定于jQuery语法：

$(document).ready(function() {
    $('#myCarousel').carousel({
    //options here
    });
});

因此，您的轮播永远不会被加载或呈现，只显示纯HTML。

Answer 2

订单也很重要。首先，你必须包括jquery然后引导，否则它将无法工作。

这是正确的顺序：

<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.6/js/bootstrap.min.js" ></script>

Bootstrap Carousel不工作

2 个答案: