我如何让这个引导轮播工作答案

【问题标题】：How do i get this bootstrap carousel working我如何让这个引导轮播工作
【发布时间】：2019-09-09 00:09:51
【问题描述】：

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

我尝试添加一些 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>

【问题讨论】：

您尝试使用哪个版本的 Bootstrap 运行此代码？语法似乎适用于 3.x，但 .item 在 4.x 修订版中也发生了更改 .carousel-item。

标签： html css twitter-bootstrap playframework carousel

【解决方案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"
});

【讨论】：

【解决方案2】：

当您使用引导轮播时，您需要使用 carousel-item 不使用 item 类

在你的项目之前使用轮播希望它能解决你的问题

【讨论】：