Touch-enabled Vertical Carousel With Bootstrap 5

A tiny jQuery script that helps you create a fully responsive, mobile-friendly, vertical carousel using the latest Bootstrap 5 framework.

Carousel slides can be cycled using Mouse Wheel or touch screen movements.

See It In Action:

How to use it:

1. Load the necessary jQuery library and Bootstrap 5 framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. The required HTML structure for the vertical carousel.

<div class="carousel-container justify-content-center">
  <!-- data-bs-interval: the amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle -->
  <!-- data-bs wrap: whether the carousel should cycle continuously (i.e go from first to last and vice-versa) -->
  <div id="vertical-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false"
    data-bs-wrap="false">
    <!-- Carousel slide indicators -->
    <ol class="carousel-indicators">
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="2"></li>
      <li data-bs-target="#vertical-carousel" data-bs-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <!-- Carousel item represents each slide -->
      <div class="carousel-item active" style="background-image:url(1.jpg);">
        <div class="container">
          <div class="row align-items-center" style="height: 100%">
            <h1 class="display-3 text-center text-light">
              Bootstrap 5 Vertical Carousel
            </h1>
          </div>
        </div>
      </div>
      <div class="carousel-item" style="background-image:url(2.jpg);">
      </div>
      <div class="carousel-item" style="background-image:url(3.jpg);">
      </div>
      <div class="carousel-item" style="background-image:url(4.jpg);">
      </div>
    </div>
  </div>
  <!-- Carousel buttons -->
  <button class="unclickable carousel-control-prev" type="button" data-bs-target="#vertical-carousel" data-bs-slide="prev">
    <span class="clickable carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="unclickable carousel-control-next" type="button" data-bs-target="#vertical-carousel" data-bs-slide="next">
    <span class="clickable carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

3. Load vertical carousel's script after jQuery.

<script src="./index.js"></script>

4. Additional CSS styles for the vertical carousel.

.carousel {
  border-radius: 50px 50px 50px 50px;
  overflow: hidden;
}

.carousel-inner, .carousel, .carousel-item, .carousel-container {
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
}

.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start {
  transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
}

.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end {
  transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
}

.carousel-indicators {
  top: 0;
  margin: auto;
  height: 20px;
  right: 10px;
  left: auto;
  display: block;
}

.carousel-indicators [data-bs-target] {
  background: none;
  border: 2px solid white;
  border-radius: 12px;
  width: 12px;
  height: 12px;
  margin-bottom: 5px;
}

.carousel-indicators li.active {
  background: white;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  width: 4rem;
  height: 4rem;
  position: fixed;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
}

.carousel-control-prev-icon {
  top: 5%;
}

.unclickable {
  pointer-events: none;
}

.clickable {
  pointer-events: all;
}

Changelog:

2022-02-20

• JS

---

This awesome jQuery plugin is developed by luvaihassanali. For more Advanced Usages, please check the demo page or visit the official website.