Je ne parviens pas à afficher les indicateurs du carrousel. Je pense que c'est quelque chose à voir avec mon utilisation du jumbrotron et du conteneur, etc. à l'intérieur de chaque "diapositive". Peut-être parce que les indicateurs sont blancs et que je ne peux donc pas les voir - dans ce cas, comment faire pour augmenter un peu les indicateurs ou déplacer la boîte grise un peu vers le bas, de sorte que les indicateurs blancs reposent sur le gris? J'ai passé des heures à essayer de le réparer, mais je suis assez nouveau dans HMTL / CSS / JS, etc. Merci beaucoup pour votre aide.

<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>
1
alandevving 9 mai 2020 à 13:45

3 réponses

Meilleure réponse

J'ai changé quelques css pour voir clairement les indicateurs. Vous pouvez vérifier cela.

.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>
1
Sifat Haque 9 mai 2020 à 11:03

Vous pouvez changer la couleur des flèches et les verrez

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

Dans cette partie fill='%23000' le 000 représente la couleur.

0
focus.style 9 mai 2020 à 11:21

Je peux les voir très bien. Changez la couleur d'arrière-plan en noir ou en une teinte plus foncée pour les afficher. :)

enter image description here

-1
Neelansh Mathur 9 mai 2020 à 10:57