Bootstrap 4轮播内容垂直对齐及指示器禁用问题

Hey there! Let's work through your Bootstrap carousel issues step by step. I’ve dealt with these exact problems before, so here’s how to fix both:

1. Vertically Center the Table in Your First Slide #

Bootstrap’s carousel items don’t automatically center content vertically by default, but we can use Bootstrap’s built-in flex utility classes to fix this quickly. Here’s what you need to adjust:

First, give your carousel a base height so the vertical alignment has a reference point (you can tweak this value to match your design). Then apply flex alignment classes to the first carousel item:

<div id="myCarousel" class="carousel slide" data-interval="false">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Add a min-height to the carousel inner container -->
  <div class="carousel-inner" style="min-height: 450px;">
    <!-- First slide: use flex classes to center content -->
    <div class="carousel-item active d-flex align-items-center">
      <div class="container">
        <!-- mx-auto centers the table horizontally -->
        <table class="table table-bordered mx-auto">
          <!-- Your table content here -->
          <tr>
            <td>Sample Cell 1</td>
            <td>Sample Cell 2</td>
          </tr>
          <tr>
            <td>Sample Cell 3</td>
            <td>Sample Cell 4</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- Remaining slides -->
    <div class="carousel-item">
      <!-- Second slide content -->
    </div>
    <div class="carousel-item">
      <!-- Third slide content -->
    </div>
  </div>
  <!-- Carousel controls -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Quick Breakdown: #

• d-flex turns the first carousel item into a flex container
• align-items-center vertically centers all child elements inside that container
• min-height: 450px on .carousel-inner ensures there’s enough vertical space for the alignment to work (adjust this to fit your content)
• mx-auto on the table centers it horizontally within the container

2. Disable Left Indicator on First Slide & Right Indicator on Third Slide #

Bootstrap doesn’t have a native setting to hide controls per slide, but we can use JavaScript to dynamically toggle their visibility based on the active slide. Here’s a reliable implementation:

First, add IDs to your control elements for easier targeting (or stick with existing selectors if you prefer):

<!-- Updated controls with unique IDs -->
<a id="carousel-prev" class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a id="carousel-next" class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

Then add this JavaScript snippet at the end of your <body> tag (or in a separate script file):

// Grab references to the carousel and controls
const carousel = document.getElementById('myCarousel');
const prevControl = document.getElementById('carousel-prev');
const nextControl = document.getElementById('carousel-next');

// Function to update control visibility
function toggleControls() {
  // Find the index of the active slide
  const activeSlideIndex = Array.from(carousel.querySelectorAll('.carousel-item'))
    .findIndex(item => item.classList.contains('active'));
  
  // Hide prev control if we're on the first slide (index 0)
  prevControl.classList.toggle('d-none', activeSlideIndex === 0);
  // Hide next control if we're on the third slide (index 2)
  nextControl.classList.toggle('d-none', activeSlideIndex === 2);
}

// Set initial state when the page loads
toggleControls();

// Update controls every time the carousel finishes sliding
carousel.addEventListener('slid.bs.carousel', toggleControls);

How It Works: #

• toggleControls() checks which slide is active by looking for the active class
• classList.toggle('d-none', condition) adds or removes Bootstrap’s d-none class to hide/show the controls based on the active slide index
• We listen to the slid.bs.carousel event (triggered after the slide transition ends) to update controls every time the slide changes
• We also run toggleControls() once on page load to set the correct initial state

If you’d prefer a CSS-only approach (good for fixed slide counts), you can use sibling selectors:

/* Hide prev control when first slide is active */
.carousel-item.active:first-child ~ .carousel-control-prev {
  display: none;
}

/* Hide next control when third slide is active */
.carousel-item.active:nth-child(3) ~ .carousel-control-next {
  display: none;
}

Note: The CSS method only works if your controls are direct siblings of the carousel items inside the main carousel container. The JavaScript approach is more flexible, especially if you plan to add/remove slides later.

内容的提问来源于stack exchange，提问作者Tyler Bryant