Better readable carousel captions.

This commit is contained in:
Bob Vandevliet 2024-12-07 12:22:37 +01:00
parent 427a6de376
commit 95c050561b
2 changed files with 34 additions and 13 deletions

View file

@ -111,32 +111,32 @@
</p>
</div>
<div class="col-md mt-0">
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner text-shadow">
<div id="carouselMyDrones" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption d-block">
<img class="img-fluid" src="assets/static/DSC_4615.png" alt="Afbeelding van mijn 7-inch FPV drone met GoPro actiecamera.">
<div class="carousel-caption">
<!-- <h3>First slide label</h3> -->
<p>Mijn 7-inch FPV drone met GoPro actiecamera,<br>ideaal voor outdoor vliegen en lange afstanden.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
<div class="carousel-caption d-block">
<img class="img-fluid" src="assets/static/20240815_184226.png" alt="Afbeelding van mijn 3.5-inch cinewhoop met Caddx Walnut camera.">
<div class="carousel-caption">
<!-- <h3>Second slide label</h3> -->
<p>Mijn 3.5-inch cinewhoop met Caddx Walnut camera,<br>ideaal voor indoor vliegen en dichtbij personen.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselMyDrones" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<button class="carousel-control-next" type="button" data-bs-target="#carouselMyDrones" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>