Html 使用ngx Swiper包装器时Swiper.js垂直幻灯片不工作

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

理解这一点有什么帮助吗

这是stackblitz链接，可用于水平幻灯片-工作

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

唯一的区别是我变了

方向：'水平'

到

方向：'垂直'

在这里的配置中

config:swipConfigInterface={
观察家:对,，
观察者：是的，
观察者：没错，
方向：'垂直'，
阈值：50，
间距：0，
幻灯片视图：1，
中心幻灯片：对，
slideToClickedSlide:true，
分页：这个。分页，
};您的包装器具有高度
自动
，swiper库自行计算高度

为包装指定边界，这样就足够了：

.card-body {
  height: 200px;
}