0
解釋錯誤是通過展示，看看這個小提琴最簡單的方法：BUG：idangerous組隊，探索 - 嵌套垂直的滑梯淡入
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'
});