Bootstrap 4 Карусель - индикаторы не появляются (элементы управления и контейнер jumbotron работают нормально)

Question

Я не могу показать индикаторы карусели. Я думаю, это как-то связано с тем, что я использую jumbrotron и контейнер et c внутри каждого «слайда». Может быть, потому что индикаторы белые, поэтому я их не вижу - в этом случае как мне либо немного сдвинуть индикаторы вверх, либо немного сдвинуть серый прямоугольник вниз, чтобы белые индикаторы располагались поверх серого? Я часами пытался это исправить, но я новичок в HMTL / CSS / JS et c, так что явно чего-то не хватает! Большое спасибо за вашу помощь.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
   <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 1</h1>
               <p class="lead text-muted">Sample sentence 1</p>
            </div>
         </section>
      </div>
      <div class="carousel-item">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 2</h1>
               <p class="lead text-muted">Sample sentence 2</p>
            </div>
         </section>
      </div>
      <div class="carousel-item">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 3</h1>
               <p class="lead text-muted">Sample sentence 3</p>
            </div>
         </section>
      </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>

Answer 1

Я изменил некоторые css, чтобы лучше видеть индикаторы. Вы можете это проверить.

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50%/100% 100%;
    background-color: #686161 !important;
    border-radius: 100%;
    box-shadow: 0px 0px 7px 2px #000000a1;
    background-size: initial !important;
}

.carousel .jumbotron {
  margin-bottom: unset;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
   <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 1</h1>
               <p class="lead text-muted">Sample sentence 1</p>
            </div>
         </section>
      </div>
      <div class="carousel-item">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 2</h1>
               <p class="lead text-muted">Sample sentence 2</p>
            </div>
         </section>
      </div>
      <div class="carousel-item">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 3</h1>
               <p class="lead text-muted">Sample sentence 3</p>
            </div>
         </section>
      </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>

Answer 2

Вы можете изменить цвет стрелок и увидеть их

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
   <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 1</h1>
               <p class="lead text-muted">Sample sentence 1</p>
            </div>
         </section>
      </div>
      <div class="carousel-item">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 2</h1>
               <p class="lead text-muted">Sample sentence 2</p>
            </div>
         </section>
      </div>
      <div class="carousel-item">
         <section class="jumbotron text-center">
            <div class="container">
               <h1 class="display-4">Slide 3</h1>
               <p class="lead text-muted">Sample sentence 3</p>
            </div>
         </section>
      </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>

В этой части fill='%23000' 000 обозначает цвет.

Answer 3

Я их прекрасно вижу. Измените цвет фона на черный или более темный, чтобы увидеть их. :)