'Prevent Swiper Slide move on click event

I am using Swiper JS (https://swiperjs.com/vue). Each swiper slide contains a button. When clicking on the slide or the button, the slide becomes the active slide, causing the slider to move.

Can I prevent the slider from moving when clicking the button of an inactive slide?

I've tried setting preventClicks to true, but unfortunately it didn't work.

It can be replicated here (https://swiperjs.com/demos/110-slides-per-view/core.html) by clicking on inactive slides. I've noticed some clicks don't move the slider, others do.

<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>
javascripthtmlvue.jsswiperswiperjs


Solution 1:[1]

It slides because of focusing on a button. I resolved it by disabling a11y on the certain slider.

Solution 2:[2]

The desired functionality can be achieved using the prop noSwipingSelector with a value of button. When clicking the button of an inactive slide, it no longer swipes to the active slide.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Konstantin K.
Solution 2 James Hine

Related Questions