jquery - 响应式移动 View 中的 Bootstrap 轮播高度差异

Question

我的网站上有很多轮播 slider 它在 PC 上运行良好，但是当我在移动设备上打开网站时，它变得有点难看。

问题是:

假设在轮播的每张幻灯片中我最多有 4 张图片，它们位于 col-md-3.col-12 div

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
    <div class="row">
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
    </div>


    </div>

    <div class="carousel-item">
      <div class="col-md-3 col-12">
            <img class="img-fluid" src="https://via.placeholder.com/20x20" alt="First slide" style="height:20px">
      </div>
      </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

在第一张幻灯片/元素中我有 4 个 div，每个都有 20px 高度，在移动 View 中 div.col-12.col-md-4 是垂直放置并且它们在彼此下方，因此此幻灯片的总高度为 80px。

在下一张幻灯片/元素中，我有 1 个 div.col-12.col-md-4，这意味着这张幻灯片的高度为 20px。

这是第一张幻灯片

这是下一张幻灯片

因此，当幻灯片更改时，由于这些高度差异，页面会上下跳动。

处理这个问题的解决方案是什么？

我想我可以将 min-height:80px 添加到 carousel 以补偿不同幻灯片中的高度损失(当然仅在移动 View 中)......但它不会很干净

或者我可以在移动 View 中禁用轮播，这样所有元素都将显示而不会滑动(不确定是否可能或如何)

这里是jsfiddle

https://jsfiddle.net/3uq4ozd2/1/

Answer 1

我建议您标准化 Bootstrap Carousel 幻灯片高度，以便可以将高度设置为最高的幻灯片:

function normalizeSlideHeights() {
    $('.carousel').each(function(){
      var items = $('.carousel-item', this);

      // reset the height
      items.css('min-height', 0);

      // set the height
      var maxHeight = Math.max.apply(null, 
          items.map(function(){
              return $(this).outerHeight()}).get() );

      items.css('min-height', maxHeight + 'px');
    })
}

$(window).on('resize orientationchange', normalizeSlideHeights);

引用: https://snook.ca/archives/javascript/normalize-bootstrap-carousel-heights