防止 Swiper Slide 在點擊事件中移動

Question

我正在使用 Swiper JS ( https://swiperjs.com/vue )。 每個滑動器幻燈片都包含一個按鈕。 單擊幻燈片或按鈕時，幻燈片變為活動幻燈片，導致 slider 移動。

單擊非活動幻燈片的按鈕時，我可以防止 slider 移動嗎？

我試過將preventClicks設置為true ，但不幸的是它沒有用。

它可以通過單擊非活動幻燈片在此處 ( https://swiperjs.com/demos/110-slides-per-view/core.html ) 進行復制。 我注意到有些點擊不會移動 slider，而其他點擊會。

<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

由於專注於按鈕，它會滑動。 我通過在某個滑塊上禁用 a11y 來解決它。

Answer 2

當我們點擊任何鏈接或按鈕時，該按鈕的滑動條就會激活，我們會看到它在滑動。 這通常發生在我們有 slidesPerView:'auto' 時。 為了防止這種情況，有一個屬性'a11y'，設置為false：

   {
   slidesPerView: 'auto',
    spaceBetween: 25,
    freeMode: true,
    preventClicks :true,
    a11y: false,
}

Answer 3

可以使用值為button的道具noSwipingSelector來實現所需的功能。 單擊非活動幻燈片的按鈕時，它不再滑動到活動幻燈片。

Answer 4

我們有一個新的領域。

利用：

watchSlidesProgress: true,

它幫助到我。

Answer 5

對我沒有任何幫助，但我在文檔中找到了解決方案：

noSwipingSelector: 'a',

使鏈接再次可點擊，並且在幻燈片中的鏈接上滑動不起作用。