Question

我试过在bootstrap中做carousel，但是在Windows 8中没有加载到Firefox或Google Chrome上。这是我写的代码，所以有人可以向我解释我做错了什么。

<html>
<body>
 <div id="mycarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
            <li data-target="#mycarousel" data-slide-to="1"></li>
            <li data-target="#mycarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item">
                <img src="img/Capture.PNG" />
            <div class="item">
                <img src="img/img1.PNG" />
            <div class="item">
                <img src="img/img3.PNG" />
        </div>
        <a class="left carousel-control"  href="#mycarousel"  data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control"  href="#mycarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</body>

</html>

Answer 1

您应该在bootstrap3中包含carousel.js并关闭 div item

Answer 2

请在您的html文档中包含carousel.js

参考下载carousel.js： http://getbootstrap.com/javascript/#carousel

Answer 3

关闭div“item”标签，然后将第一个“item”设置为“active”

    <div class="carousel-inner">
            <div class="active item">
                <img src="Capture.PNG" />
            </div>
            <div class="item">
                <img src="img1.PNG" />
            </div>
            <div class="item">
                <img src="img3.PNG" />
            </div>
        </div>

然后最重要的是，不要忘记加载“bootstrap.css” =＆GT; http://getbootstrap.com/2.3.2/assets/css/bootstrap.css。因为bootsrap使用了那个css文件。

无法加载bootstrap轮播

3 个答案: