引导旋转木马滑块不工作(Bootstrap Carousel Slider not working)

我一直在发展与引导一个主题为我的项目。当我看到有什么毛病旋转木马滑块。我已阅读多达约旋转木马这里的问题和答案，但没有关于我的问题的进展。我不能复制粘贴时，我在这里粘贴代码标签之间所看到不好的代码。

我从引导滑块： http://getbootstrap.com/javascript/#carousel

问题是，当我点击滑块下一个页面，链接被视为

http://example.com/#carousel-example-generic

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>

后没有任何反应。并且第一滑动不移动到第二个。

请检查是否有网站加载的所有depency：

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这里是一个工作实例，将它复制

http://codepen.io/anon/pen/pNRrPm

    <html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 100%;
            height: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="bs-example" data-example-id="simple-carousel">
    <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active"><img alt="First slide [900x500]"
                                          data-src="holder.js/900x500/auto/#777:#555/text:First slide"
                                          src="http://i.imgur.com/CK3d6nV.jpg" data-holder-rendered="true"></div>
            <div class="item"><img alt="Second slide [900x500]"
                                   data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
                                   src="http://i.imgur.com/SlHr4zn.jpg" data-holder-rendered="true">
            </div>
            <div class="item">
                <img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
                     src="http://i.imgur.com/OAMaVRo.jpg" data-holder-rendered="true"></div>
        </div>
        <a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
                    class="sr-only">Previous</span> </a> <a href="#carousel-example-generic"
                                                            class="right carousel-control" role="button"
                                                            data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
                    class="sr-only">Next</span> </a></div>
</div>
</body>
</html>