diff --git a/src/actions/swipeable/swipeable.js b/src/actions/swipeable/swipeable.js index 2aa474a..3a63779 100644 --- a/src/actions/swipeable/swipeable.js +++ b/src/actions/swipeable/swipeable.js @@ -70,13 +70,17 @@ export function swipeable(node, { thresholdProvider }) { } function handleMouseup(event) { - isTouching = false - if (!isValidSwipe()) return - - const coords = getCoords(event) - dispatch('end', { x: coords.x, y: coords.y }) removeEndEventListener(window, handleMouseup) removeMoveEventListener(window, handleMousemove) + + isTouching = false + + if (!isValidSwipe()) { + dispatch('swipeFailed') + return + } + const coords = getCoords(event) + dispatch('end', { x: coords.x, y: coords.y }) } addStartEventListener(node, handleMousedown) diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index f1b8ffd..8a2f2b1 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -168,7 +168,7 @@ children[pageIndex].style.maxWidth = `${pageWidth}px` } - offsetPage(false) + offsetPage({ animated: false }) } function addClones() { @@ -228,7 +228,8 @@ await showPage(pageIndex + Number(infinite)) } - function offsetPage(animated) { + function offsetPage(options) { + const animated = get(options, 'animated', true) return new Promise((resolve) => { // _duration is an offset animation time _duration = animated ? duration : 0 @@ -262,7 +263,7 @@ disabled = true updateStoreFn() - await offsetPage(get(options, 'animated', true)) + await offsetPage({ animated: get(options, 'animated', true) }) disabled = false const jumped = await jumpIfNeeded() @@ -305,6 +306,10 @@ if (!swiping) return showPage(currentPageIndex) } + async function handleSwipeFailed() { + if (!swiping) return + await offsetPage({ animated: true }) + } function handlePausedToggle(event) { if (event.detail.isTouchable) { @@ -341,6 +346,7 @@ on:start={handleSwipeStart} on:move={handleSwipeMove} on:end={handleSwipeEnd} + on:swipeFailed={handleSwipeFailed} on:threshold={handleThreshold} style=" transform: translateX({offset}px);