我如何让这个bootstrap轮播工作

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

当您使用bootstrap轮播时，您需要使用carousel-item而不是使用item class

只需使用旋转木马 - 在您的项目希望它将解决您的问题之前