javascript - 鼠标滚轮后刷卡器不会恢复自动播放

Question

我在 swiper 上的自动播放和鼠标滚轮功能有一些问题。

在我使用鼠标滚轮移动滑块后，它不会恢复自动播放。现在我将 disableOnInteraction 选项设置为 false 并且当我拖放滑块时它可以正常工作，但是在触发/使用鼠标滚轮后它不起作用。

关于鼠标滚轮事件“结束”后如何恢复自动播放的任何建议？

这是我当前的代码：

HTML

<div class="gallery-slider swiper-container">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <a href="#" class="box">
                1
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                2
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                3
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                4
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                5
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                6
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                7
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                8
            </a>
        </div>
        
        <div class="swiper-slide">
            <a href="#" class="box">
                9
            </a>
        </div>

    </div>
</div>

SCSS

.gallery-slider {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100vh;

    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;

        .box {
            width: 90%;
            height: 80%;
            display: flex;
            overflow: hidden;
            position: relative;
            transition: .3s;
            background: red;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 60px;
            text-decoration: none;

            &:hover,
            &:focus {
                transform: scale(1.1);
            }
        }
    }
}

JS

const gallery_slider = new Swiper ('.gallery-slider', {
    slidesPerView: 2.5,
    loopedSlides: 3,
    autoplay: {
        delay: 0,
        disableOnInteraction: false,
    },
    speed: 10000,
    loop: true,
    touchRatio: .3,
    spaceBetween: 20,
    effect: 'slide',
    simulateTouch: true,
    freeMode: {
        enabled: true
    },
    mousewheel: {
        sensitivity: .5,
    }
});

这是codepen的链接： https ://codepen.io/flaviort/pen/NWgjjKv

谢谢！

标签： javascriptswiperswiper.js