SSENSE/vue-carousel

Feature Request: emit separate events for click and swipe

Open

#269 opened on Aug 21, 2018

View on GitHub
 (3 comments) (1 reaction) (0 assignees)JavaScript (1,705 stars) (513 forks)batch import
featuregood first issuehelp wanted

Description

Hello there and thanks for your awesome library!

I'm trying to handle following case. I have a product gallery, and I want to be able to know when user clicked on a slide (then I want to redirect user to product page) and when user just swipes to next photo.

Didn't manage to do this. Tried different variations. The best I could do is to apply pointer-events: none to wrapper div, which completely disabled swipe, but this is not exactly what I wanted.

P.S. I put @click on carousel component, tried also to put on slide, the click event didn't fire at all.

Thanks in advance

Contributor guide

Tech stack
vuejavascript
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Vue.js basicsevent handling in Vue
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Examine the carousel component's current event emission in the source code (likely in Carousel.vue or similar). Identify where click and touch/swipe events are handled. The goal is to emit separate events like 'click' and 'swipe' instead of the combined 'slide click' or similar. Check existing comments and documentation for any design decisions. Implement a solution that distinguishes between a click (short tap) and a swipe (drag) by measuring touch duration and movement distance.