文章/答案/技术大牛

发布

社区首页 >问答首页 >BUG:轻盈的，快速的，嵌套的带有淡色垂直幻灯片

问BUG:轻盈的，快速的，嵌套的带有淡色垂直幻灯片
EN

Stack Overflow用户

提问于 2015-06-13 04:14:11

回答 1查看 1.8K关注 0票数 0

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

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

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

不管您添加了多少组垂直幻灯片，它总是最后一组滚动。这是一个不透明的问题，我认为，浏览器选择顶级div (代码中的最后一个)并滚动它，因为不透明设置为0，但div元素仍然存在。

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

我已经在他们的GitHub页面上记录了这个错误，但是同时有什么修复的想法吗？

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

Basic造型

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.js

回答 1

Stack Overflow用户

发布于 2015-06-14 13:58:13

这是在我在GitHub上的bug报告之后解决的。不再是问题了。

为供参考，对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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30814999

复制

相似问题

问BUG:轻盈的，快速的，嵌套的带有淡色垂直幻灯片
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问BUG:轻盈的，快速的，嵌套的带有淡色垂直幻灯片EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问BUG:轻盈的，快速的，嵌套的带有淡色垂直幻灯片
EN