Swiper.js 嵌套滑块在快速鼠标滚轮上首先跳转孩子和最后一个幻灯片

时间:2021-08-01 15:54:28

标签: jquery swiper swiperjs

我有一个垂直滑块,其中幻灯片 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
});

0 个答案:

没有答案