freeMode не работает в Swiper внутри внутреннего слайда

У меня очень простая проблема: я не могу понять, делаю ли я что-то не так, или это проблема самой библиотеки. Я часами ломаю голову над этим.

Я использую Swiper от 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
person Basit Nizami    schedule 30.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

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

Эта строка заставит ваш код адаптироваться к мобильным устройствам, а также заставит width стать device-width.

Но ваш рост составляет 100%, и вы не можете измениться, если не сделаете этого.

поэтому, когда вы меняете свой стиль в своем файле css, возможно, он будет использоваться в каждом разделе (контейнере), если вы не добавите эту строку кода.

но вы добавляете эту строку кода, которая станет каждой секцией: высота равна высоте устройства,

так что вам нужно добавить специальный стиль в ваш файл css, для которого вы хотите изменить

например, ваша статья длиннее, чем высота устройства, вы должны добавить специальный стиль для этого раздела. в противном случае ваш свиток не будет работать.

Китайский: я хочу печатать на китайском, но это не разрешено.

person 金色的暗    schedule 05.01.2016