我有一个垂直滑块,其中幻灯片 2 是嵌套的垂直滑块。在第一张幻灯片上,如果您放慢鼠标滚轮,它会将您带到嵌套滑块的第一张幻灯片。但是如果您使用快速鼠标滚轮重复相同的操作,您会注意到第一个嵌套幻灯片被跳过。如果您从幻灯片 3 向上滚动鼠标,也会发生同样的情况。
请查看代码笔了解更多详情。 https://codepen.io/jazzbotdev/pen/wvdoLzE
<!-- HTML -->
<div class="swiper-container swiper-container-main">
<div class="swiper-wrapper">
<div class="swiper-slide">Main 1</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-inner">
<div class="swiper-wrapper">
<div class="swiper-slide">Inner Slide 1</div>
<div class="swiper-slide">Inner Slide 2</div>
<!-- <div class="swiper-slide">Inner Slide 3</div>
<div class="swiper-slide">Inner Slide 4</div>
<div class="swiper-slide">Inner Slide 5</div> -->
</div>
<div class="swiper-pagination swiper-pagination-inner"></div>
</div>
</div>
<div class="swiper-slide">Main 3</div>
<div class="swiper-slide">Main 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-main"></div>
</div>
var swiperH = new Swiper('.swiper-container-main', {
pagination: {
el: '.swiper-pagination-main',
},
paginationClickable: true,
direction: 'vertical',
spaceBetween: 50,
mousewheel: {
invert: false,
},
mousewheelForceToAxis: true,
freeMode: false,
mousewheelForceToAxis: false,
mousewheelSensitivity: 0.5,
freeModeMomentum: true,
freeModeMomentumRatio: 10,
freeModeMinimumVelocity: 0.01,
freeModeSticky: false
});
var swiperV = new Swiper('.swiper-container-inner', {
pagination: {
el: '.swiper-pagination-inner',
},
paginationClickable: true,
direction: 'vertical',
spaceBetween: 50,
nested: true,
mousewheel: {
invert: false,
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
mousewheelForceToAxis: true,
freeMode: false,
mousewheelForceToAxis: false,
mousewheelSensitivity: 0.5,
freeModeMomentum: true,
freeModeMomentumRatio: 10,
freeModeMinimumVelocity: 0.01,
freeModeSticky: false
});