Question

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

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;
}

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'
});

Answer 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

BUG：idangerous Swiper - 带有淡入淡出的嵌套垂直幻灯片

1 个答案: