[BootStrap] Carousel sortir le carousel-caption du block

Version imprimable

1 pièce(s) jointe(s)

Bonjour,
J'ai réalisé un carousel bootstrap basique en le personnalisant un peu (pas de défilement mais action seulement par les flêches) en ajoutant un carousel-caption.
Mais j'aimerais que les caption (les numéros des images) "sortent" du d-block ou du carousel-inner : sur la capture d'écran jointe on voit que le "5" est rogné.
Je voudrais pouvoir placer ce "5" où je veux.

Merci de m'aider !

Voici le code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="container">
  <div id="carouselExampleControls" class="carousel  " data-ride="carousel" data-interval="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="img/planche7_550.png" alt="youpi">
        <div class="carousel-caption d-none d-md-block">
          <h5 style=color:black>5</h5>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="img/planche3.png" alt="oulooo">
        <h6>ooooooo</h6>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="img/planche1.png" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

23/09/2020, 14h13
NoSmoking
Bonjour et bienvenue sur DVP.

Sans plus d'info, manque le CSS notamment, il va être difficile de t'aider le mieux étant de disposer d'une page en ligne montrant le soucis.

Je dirais néanmoins qu'il faut que tu positionnes ton <h5> par rapport à son conteneur, par exemple :
Code:

1 2 3 4 5 6 .carousel-item h5 { position: absolute; bottom: 0; left: 0; color: yellow; }
Nota :
peut-être devrais tu regarder du côté des l'éléments <figure>/<figcaption> pour opérer tes regroupements.

Bonsoir,
merci de ta réponse NoSmoking,
J'ai suivi ton conseil mais le "5" disparait.
Peut-être y a-t-il des confusions avec le reste du css que voici

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 .carousel-inner {
   height: 550px; 
   width: 550px; 
   margin-left: 300px;
   margin-top: -150px;
   position: absolute;
} 
.carousel-control-next {
   right: 71%;
   width:50px;
}
.carousel-control-prev {
   left: 20%;
   width:50px;
}
.carousel-caption {position: absolute;
   width:200px;
   color:black;
   top:50%;
   left:-18%;
   }
   .carousel-item h5 {
   position: absolute;
   bottom: 0;
   left: 0;
   color: yellow;
  }

en attendant je regarde ta proposition de me tourner vers figcaption ...

09/11/2020, 18h27
AMarsEli

Pour rappel, j'aimerais "sortir" le carousel-caption du carousel-inner pour pouvoir le placer librement sur la page.
Donc se placer au-dessus (dans l'écriture html) de <div class="carousel-inner">, mais on perd le lien avec le carousel.
La solution proposée d'utiliser les figcaption ne semblent pas fonctionner ... dois-je feinter en passant par des listes et des data-target ?
Merci de vous réponses, je commence à craquer !