Vertical carousel
Bootstrap 5 Vertical carousel component
Responsive Vertical carousel built with Bootstrap 5. An example of how to easily make your carousel vertical.
Basic example
To enable vertical mode just add .vertical class next to .multi-carousel class. This function works only with multi item carousel.
<div class="multi-carousel vertical" style="max-width: 20rem;">
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
alt="Table Full of Spices"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
tabindex="0"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
tabindex="0"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>