如何將Bootstrap輪播縮略圖定位在上方和側面？-有解無憂

我希望創建一個引導 5 縮略圖輪播的變體，其中縮略圖位于幻燈片部分的頂部或左側（我需要這兩個變體）。當前默認值位于底部。

基本模型運行良好。但是，我無法將其拆分為行（縮略圖）和列（左列上的縮略圖） - 當我嘗試以不同方式包裝輪播部分時，最終結果是相同的。下面是基本代碼，然后是我如何嘗試拆分它失敗的片段。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 (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 (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 (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 (88).webp" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (121).webp" class="d-block w-100" alt="..." />
      </div>
      <div class="carousel-item">
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

我試圖用行/網格包裝將其拆分為不同的縮略圖和幻燈片。然而，縮略圖部分仍位于螢屏底部。

下面是一個將縮略圖放在頂部的示例，與我所做的其他嘗試一樣，結果是相同的，即底部的縮略圖：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

我還使用了 col md-4 的變體，逆行/列...不起作用。

我設法在沒有輪播的情況下創建了布局，但我希望有一個更簡潔的代碼，并且媒體是從一個類似的結構提供的。

任何輸入，參考都會很棒。

uj5u.com熱心網友回復：

我不認為我會嘗試在這里應用行和列。旋轉木馬內部發生的事情太復雜了。相反，我會用填充物移動旋轉木馬，為拇指騰出空間。

.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/[email protected]/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 (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 (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 (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 (88).webp" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (121).webp" class="d-block w-100" alt="..." />
          </div>
          <div class="carousel-item">
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464161.html

標籤：css 推特引导旋转木马引导程序 5

上一篇：Bootstrap3升級到Bootstrap5導航欄問題

下一篇：Flash訊息沒有采用引導樣式