Question

尝试在我的网站上添加引导轮播以显示图像，但第一个图像会显示，但是按钮无法更改图像

我尝试添加一些JavaScript，但是似乎没有任何效果。]

总的来说，我觉得这只是一个愚蠢的错误，但老实说，我不确定，也不知道该怎么办

        <div class="row">

            <div class="col-sm-4">

                <div class="midcol">

                <h2>Some of our current stock</h2>

                <div id="myCarousel" class="carousel slide" data-ride="carousel">

                    <!-- Indicators -->

                    <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" role="listbox">

                      <div class="item active">

                        <img class="first-slide" src="@routes.Assets.versioned("images/1.jpeg")" alt="First slide">

                        <div class="container">

                          <div class="carousel-caption">

                            <p>Volkswagen Polo 2012</p>

                          </div>

                        </div>

                      </div>

                      <div class="item">

                        <img class="second-slide" src="@routes.Assets.versioned("images/2.jpeg")" alt="Second slide">

                        <div class="container">

                          <div class="carousel-caption">

                            <p>Opel Corsa 2010</p>

                          </div>

                        </div>

                      </div>

                      <div class="item">

                        <img class="third-slide" src="@routes.Assets.versioned("images/3.jpeg")" alt="Third slide">

                        <div class="container">

                          <div class="carousel-caption">

                            <p>Renautl Clio 2014</p>

                          </div>

                        </div>

                      </div>

                    </div>

                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

                      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                      <span class="sr-only">Previous</span>

                    </a>

                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

                      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                      <span class="sr-only">Next</span>

                    </a>

                  </div><!-- /.carousel -->

            </div>

        </div>

Answer 1

我认为您应该使用这样的项目

                  <div class="carousel-item active">
                    <img class="d-block w-100"  src="@routes.Assets.versioned("images/1.jpeg")" alt="First slide">

                      <div class="carousel-caption d-md-block">

                        <p>Volkswagen Polo 2012</p>

                      </div>

                  </div>

并且您还应该使用jQuery代码

$('.carousel').carousel({
   interval: 6000,
   pause: "false"
});

Answer 2

使用自举轮播时，您需要使用轮播项目 安装 item 类

在您的物品希望它能解决您的问题之前，请先使用轮播-

我如何使该自转轮播工作

2 个答案: