The easiest way to explain the bug is by showing you, check out this fiddle:
https://jsfiddle.net/iforwms/a13fgzdm/13/
Sliding to slide number 2 and sliding up and down through the nested vertical slides results in the third set of slides being scrolled, not the current set of slides.
Regardless of how many sets of vertical slides you add, it's always the last set that get scrolled. It's an issue of the opacity I think, the browser picks up the top level div (the last one in the code) and scrolls through that, because the opacity is set to 0 but the div element is still there.
Changing line 5 of the javascript, removing the fade effect on the horizontal slide removes the issue.
I've logged this as a bug on their GitHub page, but any ideas of fixes in the mean time?
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>
Basic Styling
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'
});
This was resolved following my bug report on GitHub. No longer an issue.
For reference the CSS was updated as follows:
https://github.com/nolimits4web/Swiper/commit/1d22fda0a724a4c8e0741bed1e3ad5af7f64a1c2