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
              class="carousel-control-prev"
              type="button"
              tabindex="0"
              data-mdb-slide="prev"
            >
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </button>
            <button
              class="carousel-control-next"
              type="button"
              tabindex="0"
              data-mdb-slide="next"
            >
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </button>
          </div>