Swiper.js 垂直滑动无法使用 ngx-swiper-wrapper

Question

我有两个 stackblitz 示例，第一个是水平幻灯片，然后我将它们更改为垂直幻灯片。当我进行此更改时，高度会变得非常大。

对理解这个有什么帮助吗？

这是与水平幻灯片一起使用的 stackblitz link link - 工作

这是带有垂直幻灯片的 stackblitz link link - css 对齐已关闭

唯一不同的是我变了

direction: 'horizontal',

到

direction: 'vertical',

在此处配置

config: SwiperConfigInterface = {
    observer: true,
    observeParents: true,
    observeSlideChildren: true,
    direction: 'vertical',
    threshold: 50,
    spaceBetween: 0,
    slidesPerView: 1,
    centeredSlides: true,
    slideToClickedSlide: true,
    pagination: this.pagination,
  };

Answer 1

你的 wrapper 有高度 auto 和 swiper 库自己计算高度。

为包装指定边界，这应该足够了：

.card-body {
  height: 200px;
}

Forked Stackblitz

Swiper.js 垂直滑动无法使用 ngx-swiper-wrapper

Swiper.js vertical slides not working using ngx-swiper-wrapper

html

css

twitter-bootstrap

angular

swiper.js