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文件，你已经在下面调用bootstrap JS了。我看到的另一件事是，与其他irwtbawd/assets/不同的根文件夹调用了boostrap.min.js而不是仅仅assets/的另一个根文件可能是一个没有链接的问题你的资产是否正确。

- 编辑 -

另外，我发现<li>

中的第二个和第三个carousel-indicators项目中的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>

删除单词class。

这里还有一个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">

旋转木马Bootstrap

3 个答案: