时间戳

首页 > 解决方案 > 如何修复 Bootstrap 4 中的箭头和徽标滑块？

html - 如何修复 Bootstrap 4 中的箭头和徽标滑块？

问题描述

我有一个网站，其中包含滑块

我已经使用此代码来解决它，问题是当我单击箭头/每当它滑动时，滑块会在箭头下方通过。这不是我想要的，我希望幻灯片在箭头之前通过它而不是在它下面。

.enligne-fa,
.carousel-control-prev,
.carousel-control-next {
  font-size: 80px;
  color: #f3ab2a !important;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<!-- Gallery starts here -->

<section class="clients-slider mb-5">
  <div class="container-fluid company-bg-gallery">
    <div class="row  mb-4">
      <div class="col-lg-8">
        <h2 class="slider-text text-white pt-5">Gallery</h2>
      </div>

    </div>
    <div class="row my-5">
      <div class="col-lg-12 my-5">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active mx-lg-5">
              <div class="container mx-lg-5">
                <div class="row mx-lg-5">
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                </div>
              </div>
            </div>
            <div class="carousel-item mx-lg-5">
              <div class="container mx-lg-5">
                <div class="row mx-lg-5">
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                </div>
              </div>
            </div>
            <div class="carousel-item mx-lg-5">
              <div class="container mx-lg-5">
                <div class="row mx-lg-5">
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                  <div class="col-4 d-flex justify-content-center"><img class="d-block img-fluid px-2" src="https://dummyimage.com/100%20x%20100/000000/fff.png" alt="First slide"></div>
                </div>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev text-primary" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="fas fa-caret-left enligne-fa" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next text-primary" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="fas fa-caret-right enligne-fa" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Gallery ends here -->

目前，所有三张照片一次通过。我需要像codepen这样的东西，但我的箭头和BS4一样。此外，所有幻灯片都应该在箭头之前通过，并且在移动设备上也应该看起来不错。

任何帮助将不胜感激！

标签： htmlcssbootstrap-4carousel

解决方案

您的滑块位于容器流体中，它占据了屏幕的完整宽度。因此，您的滑块将占据动画中的整个​​宽度。我会尝试将您的滑块放在流体容器中的容器中。您的控件应该在流体容器中，而您的滑块应该在容器中。容器会将 with 设置为网格本身。

就像是

<div class="container-fluid">
   [ARROWS HERE]
   <div class="container">[SLIDER HERE]</div>
</div>

让我知道它是否有帮助！

推荐阅读