ОШИБКА: idangerous Swiper - вложенные вертикальные слайды с исчезновением

Самый простой способ объяснить ошибку — показать вам, проверьте эту скрипку:

https://jsfiddle.net/iforwms/a13fgzdm/13/

Скольжение к слайду номер 2 и скольжение вверх и вниз по вложенным вертикальным слайдам приводит к прокрутке третьего набора слайдов, а не текущего набора слайдов.

Независимо от того, сколько наборов вертикальных слайдов вы добавляете, прокручивается всегда последний набор. Я думаю, это проблема непрозрачности, браузер выбирает div верхнего уровня (последний в коде) и прокручивает его, потому что непрозрачность установлена ​​​​на 0, но элемент div все еще существует.

Изменение строки 5 javascript, удаление эффекта затухания на горизонтальном слайде устраняет проблему.

Я зарегистрировал это как ошибку на их странице GitHub, но есть идеи по исправлению?

HTML

<body>
<!-- Swiper -->
<div class="swiper-container swiper-container-h">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Horizontal Slide 1</div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-v">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Vertical Slide 1</div>
                    <div class="swiper-slide">Vertical Slide 2</div>
                    <div class="swiper-slide">Vertical Slide 3</div>
                    <div class="swiper-slide">Vertical Slide 4</div>
                    <div class="swiper-slide">Vertical Slide 5</div>
                </div>
                <div class="swiper-pagination swiper-pagination-v"></div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-v2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Vertical Slide 2-1</div>
                    <div class="swiper-slide">Vertical Slide 2-2</div>
                    <div class="swiper-slide">Vertical Slide 2-3</div>
                    <div class="swiper-slide">Vertical Slide 2-4</div>
                    <div class="swiper-slide">Vertical Slide 2-5</div>
                </div>
                <div class="swiper-pagination swiper-pagination-v2"></div>
            </div>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-h"></div>
</div>

Базовый стиль

html, body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background: #eee;
}

JS

var swiperH = new Swiper('.swiper-container-h', {
    pagination: '.swiper-pagination-h',
    paginationClickable: true,
    spaceBetween: 50,
    effect: 'fade' // DELETING THIS LINE REMOVES THE ISSUE
});
var swiperV = new Swiper('.swiper-container-v', {
    pagination: '.swiper-pagination-v',
    paginationClickable: true,
    direction: 'vertical',
    spaceBetween: 50,
    effect: 'fade'
});
var swiperVTwo = new Swiper('.swiper-container-v2', {
    pagination: '.swiper-pagination-v2',
    paginationClickable: true,
    direction: 'vertical',
    spaceBetween: 50,
    effect: 'fade'
});

javascript swiper
person iforwms    schedule 13.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это было решено после моего отчета об ошибке на GitHub. Больше не проблема.

Для справки CSS был обновлен следующим образом:

.swiper-slide {
    pointer-events: none;
    .swiper-slide {
        pointer-events: none;
    }
}
.swiper-slide-active {
    pointer-events: auto;
    &, & .swiper-slide-active {
        pointer-events: auto;
    }
 }

https://github.com/nolimits4web/Swiper/commit/1d22fda0a724a4c8e0741bed1e3ad5caf7f64a

person iforwms    schedule 14.06.2015