我在jquery中制作了一個圖片幻燈片。但是，當第一個圖像改變到第二個高度的div跳轉到較低的值。當最后一張圖片變成第一張圖片時，跳轉回原始尺寸。我不明白為什么。 這是所發生的事情的gif動畫。

和我的代碼(在這個片段中高度也是跳躍的)。

function swapBanners(){
      var $active = $('#ifdesignbanners .active');
      var $next = ($('#ifdesignbanners .active').next().length > 0) ? $('#ifdesignbanners .active').next() : $('#ifdesignbanners img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
}
 
$(document).ready(function(){
      // Run our swapImages() function every 2secs
      setInterval('swapBanners()', 2000);
})

#design_awards img {
  height: 150px;
}
#ifdesignbanners img {
  display: none;
}
#ifdesignbanners img.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col text-center" id="design_awards">
  <div class="d-inline-block" id="ifdesignbanners">
    <img class="active" src="https://competition.adesignaward.com/images/logo-of-a-design-award.png" alt="Награды">
    <img src="https://wdo.org/wp-content/uploads/iF_DesignAward2023_red.png " alt="Награды">
    <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Logo_iF_DESIGN_AWARD_2021.png " alt="Награды">
  </div>
</div>
<div class="col">
    <div class="row gx-2 gy-3 gx-md-4">
        <div class="col-md-4">
            <div class="row gx-0 gy-3 gy-md-4 row-cols-1">
                <div class="col">
                    <div class="card border-0 ratio ratio-4x3">
                        <img class="img-fluid card-img w-100 d-block" src="https://klinika-milano.ru/images/Beautylizer.JPG">
                        <a href="#">
                            <div class="card-img-overlay d-flex flex-column justify-content-center justify-content-lg-end project_card">
                                <div class="project_text">
                                    <h5 class="my-0">Text</h5>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

最后，我成功了。 只需將顯示:塊替換為顯示:內嵌塊。

CSS:

#design_awards img {
  height: 150px;
}
#ifdesignbanners img {
  display: none;
}
#ifdesignbanners img.active {
  display: block;
}