Swiper.js 垂直幻灯片无法使用 ngx-swiper-wrapper答案

【问题标题】：Swiper.js vertical slides not working using ngx-swiper-wrapperSwiper.js 垂直幻灯片无法使用 ngx-swiper-wrapper
【发布时间】：2020-11-19 14:57:55
【问题描述】：

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

对理解有帮助吗？

这是适用于水平幻灯片的 stackblitz 链接link - 工作

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

唯一不同的是我变了

方向：'水平'，

到

方向：'垂直'，

在此处的配置中

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

【问题讨论】：

标签： html css angular twitter-bootstrap swiper.js

【解决方案1】：

您的包装器具有高度auto，而 swiper 库会自行计算高度。

为你的包装器指定边界就足够了：

.card-body {
  height: 200px;
}

Forked Stackblitz

【讨论】：