带有 Bootstrap 4 的轮播错误答案

【问题标题】：Bug with carousel with Bootstrap 4带有 Bootstrap 4 的轮播错误
【发布时间】：2018-12-10 21:46:31
【问题描述】：

我尝试使用引导程序 4 制作轮播，但我遇到了箭头和循环的问题。使用 bootstrap 3 可以完美运行，包括 CSS。在发送文档时，我已经将项目类更改为 carousel-item，但我仍然没有成功。我认为问题很简单，但我找不到它。有人可以帮我解决这个问题吗？如果您渗入一些 stackoverflow 规则，我将不胜感激并道歉我的代码是：

.carousel-control {
  left: -12px;
  height: 40px;
  width: 40px;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  margin-top: 90px;
}

.carousel-control.right {
  right: -12px;
}


/* The indicators */

.carousel {
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
}

.carousel-indicators {
  right: 50%;
  top: auto;
  bottom: -10px;
  margin-right: -19px;
  margin: 0 auto;
}


/* The colour of the indicators */

.carousel-indicators li {
  background: #cecece;
}

.carousel-indicators .active {
  background: #428bca;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="Carousel" class="carousel slide">

  <ol class="carousel-indicators">
    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
    <li data-target="#Carousel" data-slide-to="1"></li>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">

    <div class="carousel-item active">
      <div class="row">
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
      </div>
      <!--.row-->
    </div>
    <!--.carousel-item-->

    <div class="carousel-item">
      <div class="row">
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
        <div class="col-md-3">
          <a href="#" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
        </div>
      </div>
      <!--.row-->
    </div>
    <!--.carousel-item-->

  </div>
  <!--.carousel-inner-->
  <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
  <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
<!--.Carousel-->

这可能是什么错误？

【问题讨论】：

请简要说明箭头和循环的问题。
箭头和循环不起作用，不显示图标

标签： css bootstrap-4 carousel

【解决方案1】：

图标没有显示，因为您需要在标签内添加a，您可以使用预定义的bs carousel类来控制它：

<a id="previous" class="carousel-control-prev" href="#carrousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
</a>
<a id="after" class="carousel-control-next" href="#carrousel" data-slide="next">
    <span class="carouse`enter code here`l-control-next-icon"></span>
</a>

【讨论】：

【解决方案2】：

为了让 bootstrap 4 Carousel 工作，您必须将 jquery, popper and bootstrap js files 添加到您的项目中。

您可以在链接中看到名为显示需要 JavaScript 的组件的部分，在其中您可以看到 所有幻灯片行为、控件和指示器的轮播，

在您添加的代码中没有主题标志，这可能是您的问题。

您可以在DEMO 中看到您的按钮正在工作。查看 index.html 文件，我已在其中添加了此 js 文件脚本（删除主题将重现按钮不起作用的问题）。

【讨论】：