bootstrap-carousel-not-working 和 Slide-class 在 bootstrap3 中不可用答案

【问题标题】：bootstrap-carousel-not-working and Slide-class is not available in bootstrap3bootstrap-carousel-not-working 和 Slide-class 在 bootstrap3 中不可用
【发布时间】：2016-10-21 08:20:16
【问题描述】：

这是我使用 bootstrap 3 显示滑块的代码，但它不起作用。我不使用任何其他 CSS 文件。

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img src="img/a.jpg" alt="Chania">
        </div>
        <div class="item">
            <img src="img/a2.jpg" alt="Chania">
        </div>
    </div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
         <span class="sr-only">Next</span>
    </a>
</div>

【问题讨论】：

也许你使用了一个自定义的 boostrap.js 文件，它不包含 carousel 插件。您编写的代码可以正常工作bootply.com/GP90w7vqZN

标签： jquery html twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

您的代码类似于示例here。它工作正常。是否包含了需要的 JS？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>carousel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://vignette1.wikia.nocookie.net/streetfighter/images/e/e6/CammyHUD.jpg/revision/latest?cb=20160619022012" alt="Chania">
            </div>
            <div class="item">
                <img src="http://vignette1.wikia.nocookie.net/streetfighter/images/4/48/Chun_Li.jpg/revision/20140419063249" alt="Chania">
            </div>
            <div class="item">
                <img src="http://vignette3.wikia.nocookie.net/streetfighter/images/a/a5/KarinHUD.jpg/revision/latest?cb=20160619022438" alt="Chania">
            </div>
        </div>
        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</body>
</html>

【讨论】：

是的，感谢您的回复。我会尝试你的建议，但我认为幻灯片课存在一些问题。幻灯片类在 bootstrap-3 中不可用。

【解决方案2】：

您的代码似乎运行良好。如果你正确地包含了 js，你唯一需要做的就是使用填充容器的图像。

点赞example

【讨论】：