旋转木马靴

Question

我一直在盯着这个相同的代码大约4个小时，并试图看一些不同的教程。 问题是滑块负载，其中有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文件，而您已经在下面调用了引导JS。 我看到的另一件事是，从与其余irwtbawd/assets/不同的根文件夹中调用irwtbawd/assets/而不是像其他仅包含assets/文件夹那样，可能是一个问题，无法正确链接到您的资产。

-编辑-

我也刚注意到您在carousel-indicators的第二个和第三个<li>项目中有错误的HTML标签

更改：

<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 ，您可以在那里进行测试。

Answer 2

您尝试使用javascript来调用它吗：

$('.carousel').carousel()

Answer 3

以防万一（对于未开始的人）。 不需要Jquery ，只需将其添加到轮播的第一个div中： data-ride="carousel"

div id="myCarousel" class="carousel slide" data-interval="3000"  data-ride="carousel">