错误:危险的滑动器 - 带有淡入淡出的嵌套垂直幻灯片

BUG: idangerous Swiper - Nested vertical slides with fade

本文关键字：淡入 淡出 嵌套 垂直 幻灯片 危险 错误      更新时间：2023-09-26

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

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

这是我在 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

相关文章：