bootstrap-4 - 垂直刷高度不合理

Question

我在 bootstrap 4 行内创建了一个垂直滑动器，并对该行应用了高度限制。但是垂直滑动器正在越界。

任何帮助将不胜感激。

谢谢。

HTML:

<div class="row">
  <div class="col-6 mh-50">
    <div class="v-swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-1" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-2" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-3" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-4" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-5" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-6" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-7" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-8" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-9" /></div>
        <div class="swiper-slide"><img src="//placehold.it/100x100?text=Week-10" /></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>

  <div class="col-6 mh-50">
    <img src="//placehold.it/200x100?text=Col-2" />
  </div>
</div>
<div class="row">
  <img src="//placehold.it/500x100?text=Row-2" />

</div>

CSS:

.mh-50 {
  max-height: 50vh;
}

JS:

var vswiper = new Swiper('.v-swiper-container', {
  direction: 'vertical',
  speed: 2000,
  autoplay: {
    delay: 2000,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

JS fiddle :https://jsfiddle.net/4ogo3vcg/4/

Answer 1

我在使用 Swiper 6.7.0 版时遇到了同样的问题。在这里，我分享我的解决方法。
我在 CSS 中做了一个调整。

.swiper-container-vertical .swiper-wrapper {
      position: absolute;
}

我希望这可以结束某人的搜索。快乐编码! :)