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

Question

I have two stackblitz examples, the first with horizontal slides and then I change them to vertical slides. When I make this change, the height gets blown up to something very large.

Any help understanding this?

Here is the stackblitz link that works with horizontal slides link - working

Here is the stackblitz link with vertical slides link - css alignment is off

The only difference is I've changed

direction: 'horizontal',

to

direction: 'vertical',

in the config here

 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

Your wrapper has height auto and swiper library calculates height by itself.

Specify boundaries for your wrapper and it should be enough:

.card-body {
  height: 200px;
}

Forked Stackblitz