Bootstrap Carousel 相同高度的項目

Question

我使用的是通用引導輪播，但每張幻燈片包含 2 列。 我正在嘗試使旋轉木馬幻燈片都具有相同的高度。 因此，如果一張幻燈片的內容更多，則其他幻燈片會調整到此高度：

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="5000">
      <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 align-self-center">
                test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
            </div>
            <div class="col-xl-4">
                test
            </div>
        </div>
      </div>
    </div>
    
    <div class="carousel-item white" data-bs-interval="5000">
      <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-6 align-self-center">
                test
            </div>
            <div class="col-xl-6">
                test
            </div>
        </div>
      </div>
    </div>
    

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

我嘗試了以下 jQuery 代碼，但在移動設備上檢查時似乎不起作用：

<script>
function carouselNormalization() {
  var items = $('#carouselExampleInterval .item'),
    heights = [],
    tallest;

  if (items.length) {
    function normalizeHeights() {
      items.each(function() { 
        heights.push($(this).height());
      });
      tallest = Math.max.apply(null, heights); 
      items.each(function() {
        $(this).css('min-height', tallest + 'px');
      });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function() {
      tallest = 0, heights.length = 0; 
      items.each(function() {
        $(this).css('min-height', '0');
      });
      normalizeHeights();
    });
  }
}
window.onload = function() {
  carouselNormalization();
}
</script>

Answer 1

如果您使用以下引導程序，您的容器會將所有輪播項目縮放到內容最多的項目的高度。

引導 4 h-100 class 高度：100%；

<div class="container-fluid h-100">

取代

<div class ="container">

完整的 html 更改和示例：

<section style="background:#f7f7f7;" class="py-5">

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-md-8 mx-auto">
<div id="carouselExampleFade" class="carousel slide carousel-fade parab" data-ride="carousel">
  
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleFade" data-slide-to="1"></li>
    <li data-target="#carouselExampleFade" data-slide-to="2"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h3>Sunil Radhakrishnan<br><small>Bengaluru</small></h3>
      <p>Working with Mahadevan is just what I needed to get reignited and fired up about my career which was just prodding. I am so grateful!</p>
    </div>
    <div class="carousel-item">
      <p>asdasd</p> <p>asdasd</p>
    </div>
    <div class="carousel-item">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non gravida turpis. Praesent consequat lacus eu ipsum pellentesque, et eleifend arcu bibendum. Donec vel leo in ex volutpat dapibus. Praesent eget lectus pulvinar, porta arcu quis, volutpat nulla. Vestibulum id tellus sit amet ligula egestas faucibus eget et erat. Aliquam placerat, quam vel fringilla rutrum, dui justo dictum mauris, at egestas risus eros vel ligula. Fusce sagittis convallis velit at ornare. Integer maximus, nulla sit amet cursus efficitur, nibh sem euismod elit, eget euismod mauris eros in mauris. Aliquam bibendum bibendum urna eu auctor.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non gravida turpis. Praesent consequat lacus eu ipsum pellentesque, et eleifend arcu bibendum. Donec vel leo in ex volutpat dapibus. Praesent eget lectus pulvinar, porta arcu quis, volutpat nulla. Vestibulum id tellus sit amet ligula egestas faucibus eget et erat. Aliquam placerat, quam vel fringilla rutrum, dui justo dictum mauris, at egestas risus eros vel ligula. Fusce sagittis convallis velit at ornare. Integer maximus, nulla sit amet cursus efficitur, nibh sem euismod elit, eget euismod mauris eros in mauris. Aliquam bibendum bibendum urna eu auctor.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non gravida turpis. Praesent consequat lacus eu ipsum pellentesque, et eleifend arcu bibendum. Donec vel leo in ex volutpat dapibus. Praesent eget lectus pulvinar, porta arcu quis, volutpat nulla. Vestibulum id tellus sit amet ligula egestas faucibus eget et erat. Aliquam placerat, quam vel fringilla rutrum, dui justo dictum mauris, at egestas risus eros vel ligula. Fusce sagittis convallis velit at ornare. Integer maximus, nulla sit amet cursus efficitur, nibh sem euismod elit, eget euismod mauris eros in mauris. Aliquam bibendum bibendum urna eu auctor.</p>
    </div>
  </div>
  
  
</div>
      
    </div>
  </div>
</div>
  
</section>

謝謝！