Estoy usando Swiper JS ( https://swiperjs.com/vue ). Cada diapositiva deslizante contiene un botón. Al hacer clic en la diapositiva o en el botón, la diapositiva se convierte en la diapositiva activa, lo que hace que se mueva.

¿Puedo evitar que el control deslizante se mueva al hacer clic en el botón de una diapositiva inactiva?

Intenté configurar preventClicks en true , pero desafortunadamente no funcionó.

Se puede replicar aquí ( https://swiperjs.com/demos/110-slides-per-view/core.html ) haciendo clic en las diapositivas inactivas. He notado que algunos clics no mueven el control deslizante, otros sí.

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