小编Jam*_*ine的帖子

防止 Swiper Slide 在单击事件上移动

我正在使用 Swiper JS ( https://swiperjs.com/vue )。每个滑动滑块都包含一个按钮。单击幻灯片或按钮时,该幻灯片将成为活动幻灯片,从而导致滑块移动。

单击非活动幻灯片的按钮时可以阻止滑块移动吗?

我尝试过设置preventClickstrue,但不幸的是它不起作用。

可以通过单击非活动幻灯片在此处复制它(https://swiperjs.com/demos/110-slides-per-view/core.html )。我注意到有些点击不会移动滑块,而另一些则会移动。

<swiper :modules="modules"
            :scrollbar="{ draggable: true }"
            :navigation="{prevEl: '#prev-slide', nextEl: '#next-slide', disabledClass: 'opacity-50 pointer-events-none'}"
            :breakpoints="options.breakpoints"
    >
        <swiper-slide v-for="plan in plans" :key="plan.id">
            <plan :plan="plan" @set-plan="setPlan"/>
        </swiper-slide>

        <div class="flex justify-center mt-2 space-x-2 py-3">
            <button type="button"
                    id="prev-slide"
                    class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                <arrow-narrow-left-icon class="h-5 w-5"/>
            </button>
            <button type="button"
                    id="next-slide"
                    class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm …
Run Code Online (Sandbox Code Playgroud)

html javascript vue.js swiper.js

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

html ×1

javascript ×1

swiper.js ×1

vue.js ×1