In mobile view scrolling carousel down is triggering click event.

[mrashikahmed]

Bug Report

Current Behaviour
In mobile view scrolling a carousel down is triggering a click event.

Input Code and steps to reproduce

1. Add more than 1 carousel images.
2. Try to scroll down over the carousel image.
3. Instead of scrolling down. It is triggering the click event.

Expected behavior/code

1. Need to scroll down without triggering click event.

Environment

• Node/npm version: [e.g. Node12.18.3/npm 6.14.5]
• OS: [IOS, Android]
  -Browser [Chrome, Safari]

[agnieszkabugla]

@mrashikahmed , were you able to solve this issue? I'm facing something similar and i do not know how to fix it...

[mrashikahmed]

@mrashikahmed , were you able to solve this issue? I'm facing something similar and i do not know how to fix it...

I have done a work around for this @agnieszkabugla. I added my custom touch event listener to trigger the click event. I share you the code below.

I have changed variable name and removed some property to reduce complexity. Please change it to your convenient.

1. Need to create ID's for slides in mobile device

<slide 
        v-for="(obj, index) in objList"
        :key="index">
        <img  // Desktop Images. Will be rendered only for desktop width.
          :src="obj.src"
          :click="handleSlideClick(obj.url)"
          />
        <img // Tablet Images. Will be rendered only for Tablet width.
         :src="obj.src"
          :click="handleSlideClick(obj.url)"
          />
        <img
          :id="generateId(index)"   // Add id for mobile Images
           :src="obj.src"
          :click="handleSlideClick(obj.url)"
          />
</slide>


mounted () {
    this.objList.forEach((obj, index) => {
      this.setTouchEvent(obj, index)
    })
  }

2. Add touch listener to the slides.

The following should be included in methods.

    /**
     * It prevents the click event triggering while user swipe in mobile device.
     * @param {String} url
     * @param {Number} index
     */
    handleGesture (url, index) {
      if (this.touchendY === this.touchstartY) {
        this.handleNavigation(url)
      }
    },
    /**
     * Generate the Id for each slide Images for mobile.
     * @param {Number} index
     */
    generateId (index) {
      return 'slideId' + index
    },
    /**
     * Set touch event for the generated Id.
     * @param {Object} Obj
     * @param {Number} index
     */
    setTouchEvent (obj, index) {
      let el = document.getElementById(this.generateId(index))
      if (el) {
        el.addEventListener('touchstart', (event) => {
          this.touchstartX = event.changedTouches[0].screenX
          this.touchstartY = event.changedTouches[0].screenY
        }, false)
        el.addEventListener('touchend', (event) => {
          this.touchendX = event.changedTouches[0].screenX
          this.touchendY = event.changedTouches[0].screenY
          this.handleGesture(obj.url, index)
        }, false)
      }
    }

Hope this will save some of your time.

[MuscledGeek]

In my case, I simply add this and it worked on mobile ( @click.native on slide element ):

<carousel                            
    :mouse-drag="false"
    :touch-drag="true"
    :per-page="1"
    :loop="true"
    :paginationEnabled="false"
    :navigationEnabled="true">
    <slide
        @click.native="goToAdPage($event, ad)" 
        class="adv-photo" 
        :data-background-image="ad.branch_cover_photo_full_path">
    </slide>
</carousel>