我有一个非常简单的问题,我无法弄清楚我是在做错什么,还是这是库本身的问题。我为此努力了好几个小时。
我正在使用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>
Java脚本
var swiper = new Swiper('.swiper-container.outer');
var swiper1 = new Swiper('.swiper-container.inner', {
direction: 'vertical',
freeMode: true
});
小提琴
http://jsfiddle.net/sdugx1Lu/
任何帮助是极大的赞赏。
更新资料
我的初衷根本不赞成使用嵌套滑块。我真正想要实现的是通过Swiper在“水平”滑块中具有垂直可滚动的内容(通过触摸,我在应用程序中使用它)。因此,如果可以在不使用第二级嵌套滑块的情况下完成此操作,请提出建议。当我尝试这样做时,在单级水平滑块的情况下,垂直滚动不可用。
最佳答案
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1>
</head>
这行代码使您的代码适应移动设备,并使
width
变为device-width
。但是你的身高是100%,如果你不做就不能改变
因此,当您在css文件中更改样式时,如果不添加该行代码,则可能会在每个部分(容器)中使用它。
但是您添加的每一行代码都将变成:height是device-height,
因此,您应该在要更改的css文件中添加特殊样式
例如您的文章超过了设备高度,则必须为该部分添加特殊样式。如果没有,您的滚动条将无法工作。
中文:我想打印中文,但不允许。