Is there a way to configure the positioning of Bootstrap carousel thumbnails to be above and beside?

My goal is to customize a bootstrap 5 thumbnails carousel by placing the thumbnails either on the top or the left side of the slides section. The default setting is at the bottom, but I need these two variations. The base model works perfectly, but I'm struggling to separate it into rows and columns for the thumbnails. No matter how I try to rearrange the carousel section, the end result remains unchanged. Below is the original code, followed by my attempt at splitting it which was unsuccessful.

I attempted to divide the carousel with rows and grids to distinguish between thumbnails and slides, but the thumbnail section remains fixed at the bottom of the screen.

For instance, I tried to position the thumbnails at the top, but it still displayed at the bottom, despite trying different variations like col md-4 and flipping the row/column structure.

I was able to create a layout without the carousel, but I prefer to have a cleaner code structure that serves media from a unified setup. Any suggestions or references on how to achieve this would be greatly appreciated.

csstwitter-bootstrapcarouselbootstrap-5

Answer №1

Applying rows and columns here would add unnecessary complexity due to the carousel's internal workings. Instead, I would adjust the carousel's padding to accommodate the thumbnails.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7d8c7da">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf5eaf7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why isn't the hover function working on the table row element?

When I try to apply a hover effect on tbody and td elements, it works perfectly. However, when I apply the same effect to the tr element, it doesn't work as expected. I am using inline style (js pattern) rather than CSS code and incorporating Radium i ...

javascriptcssreactjs

Modify the text color of the sliderInput element within a Shiny application

I am attempting to change the font color of the values (1,2,3,...10) in the sliderInput() from black to white, but I am encountering difficulties. How can I connect the slider with the CSS file to achieve this? ui <- fluidPage( tags$style(type = &quo ...

cssrshiny

Align the image so that it is perfectly positioned along the lower edge of the window

I have been experimenting with parallax scrolling and resizing images using JavaScript. However, I am struggling to align my homepage perfectly with the edge of the window. The code I have doesn't line up with the bottom edge of the webpage. If I us ...

javascripthtmlcss

Creating a menu header similar to Gmail's design is a great way to

How can I create a fixed menu similar to the one in Gmail? I've attempted using CSS, but the div remains centered instead of sliding up on scroll like the Gmail menu. View in full-size image I've experimented with CSS properties, here's an ...

javascripthtmlcssgmail

Having trouble with SVG background image not displaying properly and positioning correctly?

I need help fitting an svg as a background into an element that is 80% of the screen width. Here is the desired final result: https://i.sstatic.net/LhybR.png The svg effect only works correctly when I reduce the width, but then it breaks in two. I want ...

htmlcss

Using PHP code in CSS for the background styling

I'm having trouble with this line of CSS... background-image:url(upload/<?php echo $array['image']; ?>); It's not working properly, and all I see is a blank screen. The image exists in the database and on the server in the corre ...

phpcss

Eliminate gaps created by grid rows by incorporating elements of varying heights

This is the standard format of the page: * { margin: 0; padding: 0; } img { width: 100%; float: left; } #grid { display: grid; grid-template-columns: repeat(3, 1fr); } #test-one { grid-column-start: 1; grid-column-end: 2; width: 100 ...

cssgridcss-grid

Website experiencing issues with image sizing

On my website, in the Current Books section, I have a row of images. To ensure that all the images are the same height, I initially set the height of the HTML book image to 378 using: <img alt="HTML & CSS" height= "378" src="html.jpg"> Using ...

jqueryhtmlcss

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

Halt the adhesion of the Bootstrap column when it hits the div section

I have a simple bootstrap row containing two columns: <div class="row"> <div class="col-xs-7"> <p>Walking together</p> </div> <div class="col-xs-5" id="stay"> <p>Joyful journey</p> </div ...

javascriptjquerycsstwitter-bootstrap

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

javascriptjqueryhtmlcss

Hover effect within nested CSS styling applied to the list item element

I have structured my HTML as follows: <div id="chromemenu" class="chromestyle"> <ul> <li><a rel="dropmenu1" href="#" class="">Buy</a></li> <li><a rel="dropmenu2" href="#" class="">Sell</a>< ...

jqueryhtmlcsscss-selectors

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

htmlcss

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...

htmlcss

Commencing CSS Animation Post Full Page Loading

I am looking for a solution using WordPress. In my specific case, I want the CSS Animations to take effect only after the page has completely loaded. For example: click here This is my HTML: <div class="svg-one"> <svg xmlns="ht ...

javascriptcsswordpresssvgcss-animations

The refreshed Google Chrome cache post-update on the Developer Dashboard

With each new Google Chrome update, developers experience a mix of benefits and drawbacks. Lately, I have noticed a change in how Chrome handles caching, with everything being cached successively without any disassembly. For instance: When working on a we ...

cssgoogle-chromecachingdeveloper-tools

When I click on a tab section to expand it, the carat arrows all point upwards. Only the arrows corresponding to the selected section should

click here for imageIt appears that there are four tabs, each with a click function on the carat icon. When I expand one tab, all carats point upwards instead of only the selected one appearing. accountSelection(account) { if (!this.selectedAccoun ...

angularhtmlcss

What is the best way to align a form in the center of a page both horizontally and vertically

Currently, this is the HTML code I am working with: <body> <form id="form_login"> <p> <input type="text" id="username" placeholder="username" /> </p> ...

htmlcss

Learn how to dynamically toggle the visibility of tabs in CodeMirror with a simple button click

Currently, I am developing a Python editor for a website using the Code Mirror JavaScript library. There is a button called toggle invisibles that, when clicked, displays spaces and end-of-line markers. I also wanted to show tabs, which are not supported b ...

javascriptpythonjquerycsscodemirror