Carousel for applications #154
Description
Inserting this html code in the .md file allows to have an autoplaying carousel of clickable cards.
<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" style="padding: 2rem 10%;">
<div class="carousel-item active">
<div class="row align-items-center">
<div class="col-md-4">
<div class="card text-center" style="height: 100%;">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This is the first card</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center" style="height: 100%;">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This is the second card</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center" style="height: 100%;">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">This is the third card</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-4">
<div class="card text-center" style="height: 100%;">
<div class="card-body">
<h5 class="card-title">Card 4</h5>
<p class="card-text">This is the fourth card</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center" style="height: 100%;">
<div class="card-body">
<h5 class="card-title">Card 5</h5>
<p class="card-text">This is the fifth card</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center" style="height: 100%;">
<div class="card-body">
<h5 class="card-title">Card 6</h5>
<p class="card-text">This is the sixth card</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev" style="filter: invert(1); width: 10%;">
<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="#carouselExampleAutoplaying" data-bs-slide="next" style="filter: invert(1); width: 10%;">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>