htmlcsstwitter-bootstrapbootstrap-5carousel

Bootstrap carousel with vertical thumbnails on the left

How can the div, containing the thumbnails be moved to the left of the carousel like it this picture? enter image description here

I tried already wrapping it into a <div class="d-flex">but that messes up the whole carousel.

Heres my code:

.carousel-indicators {
  flex-direction: column;
  margin-left: 0;
  border: 1px solid #fff;
  width: 90px;
}

.carousel-indicators [data-bs-target] {
  border-width: 1px 1px 1px 1px;
  height: 80px !important;
  width: 80px !important;
}

.carousel-indicators img {
  height: 80px;
  width: 80px;
  padding: 1px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-7">
      <div id="carouseIndicators" class="carousel slide">
        <div>
          <div class="carousel-inner rounded-2" style="max-height: 480px;">
            <div class="carousel-item active">
              <img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100 rounded-3" alt="Product image 1">
            </div>
            <div class="carousel-item">
              <img src="https://dummyimage.com/600x400/000999/fff" class="d-block w-100 rounded-3" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://dummyimage.com/600x400/999000/fff" class="d-block w-100 rounded-3" alt="...">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouseIndicators" 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="#carouseIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouseIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
            <img src="https://dummyimage.com/600x400/000/fff" class="d-block" alt="Product thumbnail 1">
          </button>
          <button type="button" data-bs-target="#carouseIndicators" data-bs-slide-to="1" aria-label="Slide 2">
            <img src="https://dummyimage.com/600x400/000999/fff" class="d-block" alt="...">
          </button>
          <button type="button" data-bs-target="#carouseIndicators" data-bs-slide-to="2" aria-label="Slide 3">
            <img src="https://dummyimage.com/600x400/99900/fff" class="d-block" alt="...">
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

  • you need to structure the layout using Flexbox

    /* flex container for carousel+thumbnails */
.carousel-container {
  display: flex;
  max-height: 480px;
}

/* custom vertical thumbnail layout */
.carousel-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-right: 1rem;
  /* space between thumbnails and main carousel */
}

/* for each thumbnail button */
.carousel-thumbnails button {
  border: 1px solid #ccc;
  padding: 0;
  background: none;
  width: 80px;
  height: 80px;
}

.carousel-thumbnails img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* wrapper for the main carousel section */
.carousel-main {
  flex: 1;
  position: relative;
}

.carousel-inner img {
  max-height: 480px;
  object-fit: cover;
}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <div class="col-12">
      <div id="carouseIndicators" class="carousel slide">

        <!-- carousel-container wraps thumbnails and carousel -->
        <div class="carousel-container">

          <!-- moved thumbnails with new class -->
          <div class="carousel-thumbnails">
            <button type="button" data-bs-target="#carouseIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
              <img src="https://dummyimage.com/600x400/000/fff" alt="Thumb 1">
            </button>
            <button type="button" data-bs-target="#carouseIndicators" data-bs-slide-to="1" aria-label="Slide 2">
              <img src="https://dummyimage.com/600x400/000999/fff" alt="Thumb 2">
            </button>
            <button type="button" data-bs-target="#carouseIndicators" data-bs-slide-to="2" aria-label="Slide 3">
              <img src="https://dummyimage.com/600x400/999000/fff" alt="Thumb 3">
            </button>
          </div>

          <!-- wrapped original carousel in carousel-main -->
          <div class="carousel-main">
            <div class="carousel-inner rounded-3">
              <div class="carousel-item active">
                <img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="Slide 1">
              </div>
              <div class="carousel-item">
                <img src="https://dummyimage.com/600x400/000999/fff" class="d-block w-100" alt="Slide 2">
              </div>
              <div class="carousel-item">
                <img src="https://dummyimage.com/600x400/999000/fff" class="d-block w-100" alt="Slide 3">
              </div>
            </div>

            <button class="carousel-control-prev" type="button" data-bs-target="#carouseIndicators" 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="#carouseIndicators" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

    ->