Bootstrap 轮播 V 形按钮和幻灯片不起作用答案

【问题标题】：Bootstrap carousel chevron button and slides are not workingBootstrap 轮播 V 形按钮和幻灯片不起作用
【发布时间】：2018-10-24 10:23:05
【问题描述】：

我在下面粘贴了引导轮播的代码。它不起作用，但我不确定为什么。

  <div id="carouseldiv" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouseldiv" data-slide-to="0" class="active"></li>
                    <li data-target="#carouseldiv" data-slide-to="1"></li>
                    <li data-target="#carouseldiv" data-slide-to="2"></li>
                    <li data-target="#carouseldiv" data-slide-to="3"></li>
                    <li data-target="#carouseldiv" data-slide-to="4"></li>
                    <li data-target="#carouseldiv" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/1.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/2.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/3.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/4.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/5.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/6.jpg" alt="1">
                        <div class="carousel-caption">
                            <p>PUBG : King of all games</p>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#carouseldiv" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carouseldiv" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

【问题讨论】：

欢迎来到 StackOverflow。如果你说出你尝试过的和没有尝试过的，你通常会得到更好的答案。在这种情况下，较小的代码示例可能更容易诊断，并说明您使用的是哪个版本的 Bootstrap。
另外，任何试图帮助的人都会问的第一个问题是“你确定你正确地导入了引导资源吗？”如果您包含第二个 sn-p 显示您如何导入 Bootstrap CSS 和 JavaScript，或者至少提及您页面上的其他 Bootstrap 元素可以正常工作，您将节省每个人的时间。

标签： bootstrap-carousel

【解决方案1】：

我将您的代码 sn-p 与 bootstrap's website 上的代码进行了比较。

您似乎没有使用 Bootstrap 需要的 div 和 span 上的类。

例如，当 Boostrap 文档显示 <div class="carousel-item"> 时，您有 <div class="item">。我还注意到你在应该使用 <span class="carousel-control-prev-icon" aria-hidden="true"></span> 和 <span class="carousel-control-next-icon" aria-hidden="true"></span> 时使用 glyphicon chevron's。

基本上，在验证 Bootstrap 是否正确导入后，您需要逐行检查 Bootstrap 文档代码 sn-p 和您自己的代码，以确保使用的 CSS 类相同。您可能会发现从 2 幻灯片轮播开始，而不是 6 幻灯片轮播开始。

你没有发布你使用的 Bootstrap 版本，所以我假设是 4.1 版（我写这篇文章时的最新稳定版本）。

【讨论】：