how to prevent click to move to the next slide in swiperjs?

user_10932853 0
Viewed 3210

How to cancel the click of the next button in swiper base on my logic?

I use swiperjs in vue base on swiperjs, and I want to prevent the from the user to swipe or click on the button to go the next slide base on the results from my logic function.

I try this - not works.

 swiper.on('init', async () => {

    swiper.navigation.$nextEl.on('click', (e) => {
      if (true /* mylogic() */) { e.preventDefault(); }
    });
    ...
 });

and this:

  <div @click="onNext" slot="button-next"></div>
  ...
  function onNext(e) {
   if (true /* mylogic() */) { e.preventDefault(); }
  }

Nothing works - the swiper is still move to the next slide.

How to prevent the click to move to the next slide?

Code on Codesandbox.io

swiper.js vue.js javascript
1 Answers

By configuring the swiper options to use .swiper-button-prev to trigger the next swipe, it is taking place before your on-click function onNext().

Essentially you need to prevent swiper firing on the next arrow click, and then implement it yourself with the swiper.slideNext() method.

So. Add a ref to the swiper element, remove the swiper-button-prev class, move you onNext() method to the methods object (where it should be, right?), call the swiper.slideNext() method in your function, if someCondition is true.

codesandbox...

<template>
  <div id="app">
    <h2>1</h2>
    <swiper ref="mySwiper" :options="swiperOption1">
      <swiper-slide v-for="(game, index) in jackpotGames" v-bind:key="index">
        <div class="game-item game-item__1">
          game_id: {{game.game_id}},
          <br>
          provider: {{game.provider}},
          <br>
          img: {{game.img}}
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev">←</div>
      <div @click="onNext" class="" slot="button-next">→</div>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  name: "App",
  components: {
    swiper,
    swiperSlide
  },

  data() {
    return {
      swiperOption1: {
        slidesPerView: 4,
        slidesPerColumn: 1,
        spaceBetween: 16,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          type: "progressbar"
        },
        navigation: {
          // nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        breakpoints: {
          640: {
            slidesPerView: 2,
            spaceBetween: 8,
            pagination: {
              el: ".swiper-pagination",
              type: "bullets"
            },
            navigation: {}
          }
        }
      },

      jackpotGames: [
        // Removed to save space in this answer.
      ]
    };
  },
  methods: {
    onNext(e) {
      let someCondition = true;
      if (someCondition) {
        this.swiper.slideNext();
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    console.log('swiper', this.swiper);
  }
};
</script>
user_93378290
Related