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

Question

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

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

我尝试过设置preventClicks为true，但不幸的是它不起作用。

可以通过单击非活动幻灯片在此处复制它（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 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-right-icon class="h-5 w-5"/>
            </button>
        </div>
    </swiper>

Answer 1

noSwipingSelector可以使用值为 的prop 来实现所需的功能button。单击非活动幻灯片的按钮时，它不再滑动到活动幻灯片。