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>