Prevent Swiper Slide move on click event

Question

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>

Enjoy

Your swiper slides because you move your mouse a little bit when you click, not because you click. – Cleanup

@KurtVandenBranden, you are wrong. I had the same problem, on a slider where i had a button. At the first click, the slide changed. I solved it by disabling/removing a11y. – Proliferation

@KurtVandenBranden lol thanks for this comment, our QA person who clicks like a madwoman reported this bug and you are right, that is the reason – Corso

Answer 1

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,
}

Anagoge

Answer 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.

Enjoy

Answer 3

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

Alonzo

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Selfrestraint

Answer 4

Nothing worked for me, but I found a solution in the docs:

noSwipingSelector: 'a',

Makes it so links are clickable again, and swiping on a link in the slide doesn't work.

Straiten

Answer 5

We have a new field for it.

Use:

watchSlidesProgress: true,

Pigmentation

Answer 6

Had the exact same bug - after trying many solutions, this worked for me. In this case the code runs in Elementor via Elementor code snippets at the bottom of the page.

jQuery(document).ready(function($) {
  $(window).on('load', function () {              
    /* this fixes bug where random clicks will trigger a slide change */
    /* its due to the mouse click being registered as a tiny movement whilst clicking */
    if (document.querySelector('#loop-carousel-home-slider .swiper')) {
      const swiper_target = jQuery('#loop-carousel-home-slider .swiper');
      const swiperInstance = swiper_target.data('swiper');
      swiperInstance.shortSwipes = false
      swiperInstance.update()
    }
  });
});

Dinse