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

I wish to create variations of a bootstrap 5 thumbnails carousel, where the thumbnails are on the top or on the left side of the slides section (I need these two variations). Current default is at the bottom.

The base model functions well. However, I cannot split it into rows (thumbnails) and columns (thumbnails on left column) - when I try to wrap the carousel section differently the end result is the same. Below is the base code, after, followed by a snippet of how I tried to split it unsuccessfully.

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

<div >
  <!-- Carousel wrapper -->
  <div id="carouselExampleIndicators"  data-bs-ride="carousel">

    <!-- Thumbnails -->

    <div >
      <div >
        <div  style="margin-bottom: ;">
          <div >
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"  aria-current="true" aria-label="Slide 1" style="width: 100px;">
          <img 
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img (88).webp"  />
        </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" style="width: 100px;">
          <img 
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img (121).webp"  />
        </button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" style="width: 100px;">
          <img 
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img (31).webp"  />
        </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Thumbnails -->

    <!-- Slides -->

    <div >
      <div >
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (88).webp"  alt="..." />
      </div>
      <div >
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (121).webp"  alt="..." />
      </div>
      <div >
        <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (31).webp"  alt="..." />
      </div>
    </div>


    <!-- Slides -->

    <!-- Controls -->
    <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </button>
    <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span  aria-hidden="true"></span>
      <span >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>

I tried to split it with rows/grid wrapping to differ thumbnails and slides. Yet,the thumbnail section stays at the bottom of the screen.

below is an example for placing thumbnails at top, as with other tries I made, the result is the same, i.e. the thumbnails at the bottom:

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

<div >
  <!-- Carousel wrapper -->
  <div id="carouselExampleIndicators"  data-bs-ride="carousel">

    <!-- Thumbnails -->
    <div >
      <div >


        <div  style="margin-bottom: ;">
          <div >
            .... closing with </div> etc'

          <!--Thumbnails-->

          <!-- Slides -->
          <div >
            <div >
              <div >
                <div >
                  .... 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>

I also used variations of col md-4, inverse the row/col...didn't work.

I managed to create the layout without a carousel, but I'd like to have a cleaner code and where media is served from one similar structure.

Any input, reference would be great.

CodePudding user response：

I don't think I'd try to apply rows and columns here. There's just too much complexity with what's going on inside the carousel. Instead I'd shift the carousel with padding to make room for the thumbs.

.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 >
  <div >
    <div >

      <!-- Carousel wrapper -->
      <div id="carouselExampleIndicatorsLeft"  data-bs-ride="carousel">

        <!-- Thumbnails -->
        <div >
          <button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="0"  aria-current="true" aria-label="Slide 1">
          <img 
            src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img (88).webp"  />
        </button>

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

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

        <!-- Slides -->
        <div >
          <div >
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (88).webp"  alt="..." />
          </div>
          <div >
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (121).webp"  alt="..." />
          </div>
          <div >
            <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img (31).webp"  alt="..." />
          </div>
        </div>

        <!-- Controls -->
        <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span  aria-hidden="true"></span>
      <span >Previous</span>
    </button>

        <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span  aria-hidden="true"></span>
      <span >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>