Question

我正在尝试在我的网站上运行一个引导程序轮播，它显示已折叠，但它没有转到下一张幻灯片，只是“跳了一下”。

这是我的标题可能无序：

c(4, 6)

以下是我遇到问题的旋转木马的HTML：

<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js" type="javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

作为一个注释，我已经将它用于Codepen，但它不能在我编写的机器上运行。

Carousel on Codepen

我并不关心codepen上Carousel的外观，只关注功能。

Answer 1

jQuery 3与bootstrap 3存在一些兼容性问题。您的codepen正在使用jquery 2.2.4。将您的jQuery版本切换到2.2.4

Answer 2

它适用于以前版本的jQuery，而不是版本3.x。

摘录：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="carousel slide" id="spinner" data-ride="carousel">
    <ol class="carousel-indicators">
        <li class="active" data-target="#spinner" data-slide-to="0"></li>
        <li data-target="#spinner" data-slide-to="1"></li>
        <li data-target="#spinner" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active"><img src="http://placehold.it/600x300"></div>
        <div class="item"><img src="http://placehold.it/600x300"></div>
        <div class="item"><img src="http://placehold.it/600x300"></div>
    </div>
    <a class="left carousel-control" href="#spinner" role="button" data-slide="prev">
  <span class="icon-prev" aria-hidden="true">
  </span><span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#spinner" role="button" data-slide="next">
  <span class="icon-next" aria-hidden="true">
  <span class="sr-only">Next</span></span></a>
</div>

Answer 3

在头标记中使用此链接

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我似乎无法让Bootstrap Carousel在本地工作，但它适用于codepen

3 个答案: