diff --git a/play/index.js b/play/index.js
index 230569d6e..c804cd8b8 100644
--- a/play/index.js
+++ b/play/index.js
@@ -272,6 +272,30 @@ play("Carousel", module)
},
}
})
+ .add("non-touch slideclick event", {
+ template:
+ `
+
+
+
+
+
+
`,
+ components: {
+ Carousel,
+ Slide
+ },
+ data() {
+ return {
+ slides: images
+ }
+ },
+ methods: {
+ onSlideClick(currentDataset) {
+ this.$log(`Captured non touch slide click event. Current dataset is ${JSON.stringify(currentDataset)}`)
+ },
+ }
+ })
.add("slideclick event", {
template:
`
diff --git a/src/Slide.vue b/src/Slide.vue
index 33ca843c7..638ec0feb 100644
--- a/src/Slide.vue
+++ b/src/Slide.vue
@@ -31,7 +31,8 @@ export default {
this.$el.addEventListener(
this.carousel.isTouch ? "touchend" : "mouseup",
- this.onTouchEnd
+ this.onTouchEnd,
+ this.onMouseUp
);
},
computed: {
@@ -103,6 +104,20 @@ export default {
this.$emit("slideclick", Object.assign({}, e.currentTarget.dataset));
this.$emit("slide-click", Object.assign({}, e.currentTarget.dataset));
}
+ },
+
+ onMouseUp(e) {
+ // On click for non-touch events only
+ const X_Axis_Pos = e.clientX;
+ const X_Axis_Change = this.carousel.dragStartX - X_Axis_Pos;
+
+ if (
+ this.carousel.minSwipeDistance === 0 ||
+ Math.abs(X_Axis_Change) < this.carousel.minSwipeDistance
+ ) {
+ this.$emit("slideclick", Object.assign({}, e.currentTarget.dataset));
+ this.$emit("slide-click", Object.assign({}, e.currentTarget.dataset));
+ }
}
}
};