[Help]: Handle swipe and click for changing the slide #1143
-
SummaryI'm building a carousel where both swiping and clicking for navigation are needed. If applicable, which variants of Embla Carousel are relevant to this question?
Additional informationNo response CodeSandbox exampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
@AnsBdran in your case, navigation buttons can't be used directly on the carousel, as they'll block clicks by being a layer placed on top of the carousel viewport. If Embla registers a drag gesture, it will block click events from firing. But if the pointer gesture doesn't include dragging, Embla will let the click event pass. So I think what you need to do is to attach a click listener to the carousel viewport, and determine where the click happened. Something along these lines: <script>
function handleClick(event) {
const x = event.clientX;
const y = event.clientY;
// TODO: Determine if the click was on the left or right half of the carousel viewport
// if click is inside the left half --> run emblaApi.scrollPrev()
// if click is inside the right half --> run emblaApi.scrollNext()
}
</script>
<div on:click={handleClick}>
This div is the carousel viewport
</div> |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. |
Beta Was this translation helpful? Give feedback.
@AnsBdran in your case, navigation buttons can't be used directly on the carousel, as they'll block clicks by being a layer placed on top of the carousel viewport. If Embla registers a drag gesture, it will block click events from firing. But if the pointer gesture doesn't include dragging, Embla will let the click event pass. So I think what you need to do is to attach a click listener to the carousel viewport, and determine where the click happened. Something along these lines: