Question

我一直在尝试学习bootstrap，我已经转向YouTube上的精彩创作者以获得帮助并复制他们的代码以试图找出每个元素的作用。一个问题，在完全复制代码之后，我似乎无法弄清楚为什么这个轮播不会自动交换幻灯片（我不需要任何控件）。如果有人能够散发一些令人惊叹的光芒。

HTML代码：

<div id="slider" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/computerroom.png" alt="computer room" />
        </div>
    </div>
    <div class="carousel-inner" role="listbox">
        <div class="item">
            <img src="img/owenscomputerrepair.png" alt="owens computer repair" />
        </div>
    </div>
</div>

谢谢：）

Answer 1

您需要通过data-interval属性传递值，以告诉它按照文档中的指定自动循环的频率：http://getbootstrap.com/javascript/#carousel

Answer 2

你有没有包含jQuery＆amp; bootstrap.js？

Answer 3

这两项必须在<div class="carousel-inner" role="listbox">...</div>

之内

Answer 4

你有两个carousel-inner类的div。应该只有一个，你的两个项目都应该在那里。

＆＃13;

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="slider" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="https://placekitten.com/g/200/200" alt="computer room" />
        </div>
        <div class="item">
            <img src="http://placehold.it/200x200" alt="owens computer repair" />
        </div>
    </div>
</div>

＆＃13;

无法弄清楚为什么我的旋转木马不工作（Bootstrap）

4 个答案: