如何将 Bootstrap 个轮播缩略图放在上方和侧面？

Question

我希望创建 bootstrap 5 个缩略图轮播的变体，其中缩略图位于幻灯片部分的顶部或左侧（我需要这两个变体）。当前默认在底部。

基本模型运行良好。但是，我无法将其拆分为行（缩略图）和列（左列上的缩略图）——当我尝试以不同方式包装轮播部分时，最终结果是相同的。下面是基本代码，之后是我如何尝试拆分失败的片段。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <!-- Carousel wrapper -->
  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">

    <!-- Thumbnails -->

    <div class="row">
      <div class="">
        <div class="my slider carousel-indicators" style="margin-bottom: ;">
          <div class="container op position-relative">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" style="width: 100px;">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
        </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" style="width: 100px;">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
        </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" style="width: 100px;">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
        </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Thumbnails -->

    <!-- Slides -->

    <div class="carousel-inner mb-5">
      <div class="carousel-item active">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
      </div>
    </div>


    <!-- Slides -->

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

  </div>
</div>
<!-- Carousel wrapper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

我试图用 rows/grid 换行将其拆分为不同的缩略图和幻灯片。然而，缩略图部分仍位于屏幕底部。

下面是一个将缩略图放在顶部的例子，和我做的其他尝试一样，结果是一样的，即缩略图在底部：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <!-- Carousel wrapper -->
  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">

    <!-- Thumbnails -->
    <div class="col">
      <div class="row">


        <div class="my slider carousel-indicators" style="margin-bottom: ;">
          <div class="container op position-relative">
            .... closing with </div> etc'

          <!--Thumbnails-->

          <!-- Slides -->
          <div class="row">
            <div class="col">
              <div class="carousel-inner mb-5">
                <div class="carousel-item active">
                  .... closing with </div> etc'

                <!-- Slides -->

              </div>
            </div>

            Def

            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

我还使用了 col md-4 的变体，反转 row/col...没有用。

我设法创建了没有旋转木马的布局，但我想要一个更简洁的代码，并且从一个类似的结构中提供媒体。

任何输入，参考都很好

Answer 1

我认为我不会尝试在此处应用行和列。旋转木马内部发生的事情太复杂了。相反，我会移动带填充的旋转木马，为拇指腾出空间。

.carousel.carousel-thumbs-top {
  padding-top: 60px;
}

.carousel.carousel-thumbs-top .carousel-indicators {
  top: 0;
  bottom: auto;
}

.carousel .carousel-indicators button {
  width: 100px !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">

      <!-- Carousel wrapper -->
      <div id="carouselExampleIndicatorsLeft" class="carousel slide carousel-fade carousel-thumbs-top" data-bs-ride="carousel">

        <!-- Thumbnails -->
        <div class="slider carousel-indicators position-absolute">
          <button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
        </button>

          <button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="1" aria-label="Slide 2">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
        </button>

          <button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="2" aria-label="Slide 3">
          <img class="d-block w-100"
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
        </button>
        </div>

        <!-- Slides -->
        <div class="carousel-inner mb-5">
          <div class="carousel-item active">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
          </div>
        </div>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

如何将 Bootstrap 个轮播缩略图放在上方和侧面？

How can I position Bootstrap carousel thumbnails above and to the side?

css

carousel

twitter-bootstrap

bootstrap-5