Swiper（高度问题 - 多个 swiper - 垂直方向）答案

【问题标题】：Swiper ( height issue – multiple swiper – vertical direction )Swiper（高度问题 - 多个 swiper - 垂直方向）
【发布时间】：2015-06-11 07:56:13
【问题描述】：

我想在这里提出一个问题，我已经在 swiper 的 developers forum 中提出了这个问题。所以不要混淆。如果找到/找到解决方案，我将关闭/标记两者。

目前我想要一个项目的水平滚动侧边栏和垂直滚动页脚。（基于刷卡）但是，如果您从水平 (1) 页脚切换到垂直 (2) 页脚，看看会发生什么。

Video 1 (direction both horizontal - not wanted)

Video 2 (footer direction vertical, wanted! - not works)

如您所见，在简化示例中（视频 2）：如果我在第二个 swiper-container 上使用 direction:vertical 它会破坏结果。 “swiper-slide”的 HEIGHT 应该是 226px，现在显示为 2408px 的 HEIGHT 和 100px 的 MARGIN-BOTTOM。

我真的不明白这里出了什么问题。

ConfInit

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'
            }
        ];

【问题讨论】：

标签： javascript jquery swipe swiper

【解决方案1】：

我也遇到过同样的问题，通过在 swiper 容器中添加 height: 100vh 声明解决了。

发现

height 属性是必须的

注意：% 不起作用

【讨论】：

这对我有用，非常感谢！