无法弄清楚为什么我的轮播不起作用(引导程序)

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 &bootstrap.js吗?

Answer 3

在carousel-inner类中有两个div。只能有一个，而且你的两个条目都应该在里面。

<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>

Answer 4

这两个项目需要在<div class="carousel-inner" role="listbox">...</div>