javascript - 轮播 Bootstrap

Question

我已经盯着这段相同的代码看了大约 4 个小时，并尝试观看一些不同的教程。问题是 slider 加载，有 3 张幻灯片的空间，但它只显示第一张幻灯片。

所有图像加载良好(在浏览器中验证)，但轮播不会更改幻灯片。

请帮忙，谢谢!

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/js/bootstrap.min.js">
<!--Familiar with CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
                    <div id="creativecommons" class="carousel slide" data-ride="carousel">

                        <ol class="carousel-indicators">
                            <li data-target="#creativecommons" data-slide-to="0" class="active"> </li>
                            <li data-target="#creativecommons" data-slide-to="1" class> </li>
                            <li data-target="#creativecommons" data-slide-to="2" class> </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="assets/images/slide1.jpg" alt="beach" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="assets/images/slide2.jpg" alt="beach" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="assets/images/slide3.jpg" alt="beach" class="img-responsive">
                            </div>
                        </div>
                    </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="irwtbawd/assets/js/bootstrap.min.js"></script>

Answer 1

我可以看到一些错误，在顶部你有 <link rel="stylesheet" href="assets/js/bootstrap.min.js">删除它，因为它应该用于 CSS 而不是 JS 文件，并且您已经在调用下面的 bootstrap JS。我看到的另一件事是 boostrap.min.js 是从与其他文件夹不同的根文件夹调用的 irwtbawd/assets/而不是像其他那样只是 assets/可能存在无法正确链接到您的 Assets 的问题。

-- 编辑--

此外，我刚刚注意到第二个和第三个中的 HTML 标记有误 <li> carousel-indicators 中的项目

更改:

<li data-target="#creativecommons" data-slide-to="1" class> </li>
<li data-target="#creativecommons" data-slide-to="2" class> </li>

至:

<li data-target="#creativecommons" data-slide-to="1"> </li>
<li data-target="#creativecommons" data-slide-to="2"> </li>

删除词类。

这里还有一个JSFIDDLE我刚刚把它们放在一起，你可以在那里测试一下。