freeMode 在内部幻灯片内的 Swiper 上不起作用答案

【问题标题】：freeMode not working on Swiper inside an inner slidefreeMode 在内部幻灯片内的 Swiper 上不起作用
【发布时间】：2015-11-30 22:41:48
【问题描述】：

我有一个非常简单的问题，我不知道是我做错了什么还是图书馆本身的问题。我为此苦恼了好几个小时。

我正在使用来自 iDangerous 的 Swiper。

我正在尝试创建一个简单的水平滑动条，在每张幻灯片中，都会有另一个处于垂直模式的滑块，我需要在 freeMode 中设置该垂直滑块。该内部垂直滑块将始终具有一张包含大量内容的幻灯片（至少有一些可以滚动）。 嵌套滚动条可以工作，但 freeMode 根本不适合我。只有当我在外部声明它时 freeMode 才有效。我有一个小提琴，所以你可以看到我想要做什么。小提琴中的一些示例代码如下。

HTML

<div class="swiper-container outer">
            <div class="swiper-wrapper">
                <div class="swiper-slide">

                    <div class="swiper-container inner">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                lots of lorem ipsum here. see fiddle
                            </div>
                        </div>
                    </div>

                </div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
        </div>

Javascript

var swiper = new Swiper('.swiper-container.outer');
var swiper1 = new Swiper('.swiper-container.inner', {
    direction: 'vertical',
    freeMode: true
});

小提琴

http://jsfiddle.net/sdugx1Lu/

非常感谢任何帮助。

更新

我的初衷是完全不赞成使用嵌套滑块。我真正想要完成的是通过 Swiper 在水平滑块中具有垂直可滚动的内容（通过触摸，我在应用程序中使用它）。所以，如果这可以在不使用第二级嵌套滑块的情况下完成，请提出建议。当我尝试这样做时，垂直滚动在单级水平滑块的情况下不可用。

【问题讨论】：

标签： javascript swiper

【解决方案1】：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1>
</head>

此行使您的代码适应移动设备，并且还将使width 变为device-width。

但你的身高是 100% 不改变就无法改变

所以当你在你的css文件中改变你的样式时，如果你不添加那行代码，它可能会在每个部分（容器）中使用。

但是你添加那行代码每个部分都会变成：height is device-height，

所以你应该在你想要更改的css文件中添加特殊样式

如果您的文章比设备高度长，您必须为该部分添加特殊样式。否则，您的滚动将无法正常工作。

中文：我想打印中文，但不允许。

【讨论】：