Question

这是我使用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>

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

Answer 2

您的代码似乎完美无缺。如果正确包含js，您唯一需要做的就是使用填充容器的图像。

喜欢这个example

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

2 个答案: