I am using Swiper JS (). 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 (.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>

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>

• javascript
• html
• vue.js
• swiper.js

• 1 Your swiper slides because you move your mouse a little bit when you click, not because you click. – Kurt Van den Branden Commented Mar 19, 2022 at 19:59
• @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. – aph Commented May 31, 2022 at 13:29
• @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 – Rick Davies Commented Dec 22, 2023 at 19:15

6 Answers 6

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

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.

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

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.

We have a new field for it.

Use:

watchSlidesProgress: true,

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()
    }
  });
});