Вертикальные слайды Swiper.js не работают с использованием ngx-swiper-wrapper

У меня есть два примера stackblitz, первый с горизонтальными слайдами, а затем я меняю их на вертикальные слайды. Когда я делаю это изменение, высота увеличивается до чего-то очень большого.

Любая помощь в понимании этого?

Вот ссылка на stackblitz, которая работает со ссылкой на горизонтальные слайды - работает

Вот ссылка stackblitz с вертикальными горками ссылки - выравнивание CSS выключен

Единственная разница в том, что я изменил

направление: 'горизонтальное',

к

направление: 'вертикальное',

в конфиге здесь

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

Источник

1 ответ

Решение

Ваша обертка имеет высоту auto а библиотека swiper сама вычисляет высоту.

Укажите границы для вашей оболочки, и этого должно хватить:

.card-body {
  height: 200px;
}

Разветвленный Stackblitz

Источник
Другие вопросы по тегам