double click when use <router-link>

[matamune94]

hi, i use n-link in carouse , when click on link try drag right or left and mouse up, It automatically jumps to another page, how can fix ? my demo

<template>
  <div>
    <VueSlickCarousel :arrows="true" :dots="true">
      <div v-for="(img, idx) in temps" :key="idx">
        <n-link to="/ahihi" no-prefetch>
          <img :src="img" :alt="idx">
        </n-link>
      </div>
    </VueSlickCarousel>
  </div>
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {
  name: 'MyComponent',
  components: { VueSlickCarousel },
  data () {
    return {
      temps: [
        '//cdn.shopify.com/s/files/1/0069/5694/1394/files/slide_2-compressor.png?v=1569471949',
        '//cdn.shopify.com/s/files/1/0069/5694/1394/files/slide_1-compressor.png?v=1569465667',
        '//cdn.shopify.com/s/files/1/0069/5694/1394/files/slide_3-compressor.png?v=1569471975'
      ]
    }
  }
}
</script>

you can install nuxt and VueSlickCarousel and try my demo, or use router-link

[alihsistu]

@matamune94 Hey, By the way, why are you using using or ? As doing so will trigger the link every time you click on the carousel items. To prevent going to another page, just remove the around the tag. I hope the following solves the issue you're facing.

<template>
   <div>
      <VueSlickCarousel :arrows="true" :dots="true">
         <div v-for="(img, idx) in temps" :key="idx">
            <img :src="img" :alt="idx" />
         </div>
      </VueSlickCarousel>
   </div>
</template>

<script>
import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";

export default {
   name: "MyComponent",
   components: { VueSlickCarousel },
   data() {
      return {
         temps: [
            "//cdn.shopify.com/s/files/1/0069/5694/1394/files/slide_2-compressor.png?v=1569471949",
            "//cdn.shopify.com/s/files/1/0069/5694/1394/files/slide_1-compressor.png?v=1569465667",
            "//cdn.shopify.com/s/files/1/0069/5694/1394/files/slide_3-compressor.png?v=1569471975"
         ]
      };
   }
};
</script>

[monitork]

i got same issue. But i have a solution: vue-slick-carousel have 2 event: beforeChange and afterChange you using a flag = isWiping

beforeChange(e: any) { this.isWipe = true }

afterChange(e: any) { this.isWipe = false }

prop slideIsWipe = isWipe to child component

<template>
<div @click="onTap">
          <img :src="img" :alt="idx">
        </div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from "nuxt-property-decorator";
import {ISlider} from '~/types';
@Prop({type: Boolean, required: true}) slideIsWipe !: boolean

@Component
export default class BannerItem extends Vue {
 onTap(e: any) {
    e.preventDefault()
    if (!this.slideIsWipe && this.slider.link) {
      this.$router.push({path: this.slider.link})
      this.slideIsWipe = false
    }
  }
}</script>

It's ok. router-link --> i cannot prevent when click. then i change router-link to div Hope this help u....!

[MarekGogol]

Solution (without change in plugin code)

1. trigger swipe start event + end event. While user is swipping, we need display class with invisible overlay which will disable click event.

   
   <vue-slick-carousel
   @swipe="setCarouselSwiping(true)"
   @mouseup.native="setCarouselSwiping(false)"
   @touchend.native="setCarouselSwiping(false)"
   :class="{ '--swiping' : swiping === true }
   >
   ...

methods : { setCarouselSwiping(state){ this.swiping = state; }

2. Global css

.slick-slider.--swiping { .slick-list:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } }

3. fixed, haleluja.