Question

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

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

Answer 1

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

看来您没有使用Bootstrap所需的div和span上的类。

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

基本上，在验证Bootstrap是否正确导入之后，您将需要遍历Bootstrap文档代码片段和您自己的行，以确保使用的CSS类相同。您可能会发现从2幻灯片轮转而不是6幻灯片轮转开始很有帮助。

您没有发布正在使用的Bootstrap版本，因此我假设使用的版本是4.1（这是我撰写本文时的最新稳定版本）。

Bootstrap旋转木马V形按钮和幻灯片不起作用

1 个答案: