html - 我如何让这个 Bootstrap 轮播工作

Question

尝试向我的网站添加 Bootstrap 轮播以显示图像，第一张图像显示，但是按钮无法更改图像

我尝试添加一些 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"
});