BUG：危险的 Swiper - 带有淡入淡出的嵌套垂直幻灯片答案

【问题标题】：BUG: idangerous Swiper - Nested vertical slides with fadeBUG：危险的 Swiper - 带有淡入淡出的嵌套垂直幻灯片
【发布时间】：2015-06-13 04:14:11
【问题描述】：

解释错误的最简单方法是向您展示，看看这个小提琴：

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

滑动到第 2 张幻灯片并在嵌套的垂直幻灯片中上下滑动会导致滚动第三组幻灯片，而不是当前组幻灯片。

无论您添加多少组垂直幻灯片，滚动的始终是最后一组。我认为这是不透明度的问题，浏览器会选择顶级 div（代码中的最后一个）并滚动浏览，因为不透明度设置为 0，但 div 元素仍然存在。

更改 javascript 的第 5 行，删除水平幻灯片上的淡入淡出效果即可解决问题。

我已在他们的 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;
}

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

【解决方案1】：

我在 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/1d22fda0a724a4c8e0741bed1e3ad5af7f64a1c2

【讨论】：