Question

我尝试使用bootstrap 4制作旋转木马，但我遇到箭头和周期问题。使用bootstrap 3它可以很好地工作，包括CSS。我已经将item类更改为carousel-item，因为它发送了文档，但我仍然没有成功。我认为问题很简单，但我找不到。有人可以帮我吗？如果你渗透一些stackoverflow规则，我将不胜感激并道歉我的代码是：

＆＃13;

.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;
}

＆＃13;

<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-->

＆＃13;

这可能是什么错误？

Answer 1

未显示图标，因为您需要在标签内添加a，并且可以使用bs轮播的预定义类进行控制：

<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>

Answer 2

要使Bootstrap 4 Carousel正常工作，您必须在项目中添加jquery, popper and bootstrap js files。

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

>

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

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

带有Bootstrap 4的旋转木马的Bug

2 个答案: