Swiper (проблема с высотой — несколько swiper — вертикальное направление)

Я хотел бы задать здесь вопрос, который уже задавал в форум разработчиков swiper. Так что не путайте. Если решение есть/было найдено, я закрою/отмечу оба.

На данный момент я хочу для проекта горизонтальную боковую панель с прокруткой и нижний колонтитул с вертикальной прокруткой. (На основе Swiper) Но посмотрите сами, что произойдет, если вы переключитесь с горизонтального (1) нижнего колонтитула на вертикальный (2).

Видео 1 (оба направления горизонтальные - не нужны )

Видео 2 (направление нижнего колонтитула вертикально, требуется! - не работает)

Как вы можете видеть, на упрощенном примере (Видео 2): если я использую direction:vertical на втором контейнере swiper, результат нарушается. Там, где ВЫСОТА "swiper-slide" должна быть 226 пикселей, теперь отображается ВЫСОТА 2408 пикселей и ПОЛЕ-НИЗ 100 пикселей.

Я действительно не могу понять, что здесь происходит.

Конфинит

var swiper = [];
    $('.swiper-container').each(function(index){

        var $el = $(this);

        var sParams = [{
                speed: 400,
                spaceBetween: 100,
                allowSwipeToNext: false, // for event controlled swipes 
                allowSwipeToPrev: false  // for event controlled swipes 
            },
            {
                speed: 400,
                spaceBetween: 100,
                allowSwipeToNext: false, // for event controlled swipes 
                allowSwipeToPrev: false, // for event controlled swipes 
                direction: 'vertical'
            }
        ];

person Sascha    schedule 11.06.2015    source источник


Ответы (1)


Я столкнулся с той же проблемой, решенной путем добавления объявления height: 100vh в контейнер swiper.

Нахождение

  • height свойство является обязательным

ПРИМЕЧАНИЕ. % не работает.

person kantbtrue    schedule 30.01.2021