Prevent Swiper Slide move on click event

user_16769102 0
Viewed 2660

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>
swiper.js vue.js html javascript
4 Answers

When we click on any link or button, the swiper slide of that button gets active and we see it sliding. This usually happens when we have slidesPerView:'auto'. To prevent this , there is an attribute 'a11y', set to false as:

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

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

user_21606890

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.

user_167691020

We have a new field for it.

Use:

watchSlidesProgress: true,
user_194009970
Related