diff --git a/README.md b/README.md index f199c0c..2dc47d1 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ Import component | `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator | | `dots` | `boolean` | `true` | Current page indicator dots | | `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function | +| `swiping` | `boolean` | `true` | Enable swiping | ## Events diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 0589c37..43c35af 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -90,6 +90,11 @@ */ export let dots = true + /** + * Enable swiping + */ + export let swiping = true + export async function goTo(pageIndex, options) { const animated = get(options, 'animated', true) if (typeof pageIndex !== 'number') { @@ -281,15 +286,19 @@ // gestures function handleSwipeStart() { + if (!swiping) return _duration = 0 } async function handleThreshold(event) { + if (!swiping) return await directionFnDescription[event.detail.direction]() } function handleSwipeMove(event) { + if (!swiping) return offset += event.detail.dx } function handleSwipeEnd() { + if (!swiping) return showPage(currentPageIndex) } function handleFocused(event) { diff --git a/src/components/Carousel/stories/CarouselView.svelte b/src/components/Carousel/stories/CarouselView.svelte index 02743d5..6c47864 100644 --- a/src/components/Carousel/stories/CarouselView.svelte +++ b/src/components/Carousel/stories/CarouselView.svelte @@ -56,6 +56,11 @@ */ export let dots = true + /** + * Enable swiping + */ + export let swiping = true + const colors = [ { color: '#e5f9f0', text: '0' }, { color: '#ccf3e2', text: '1' }, @@ -89,6 +94,7 @@ {pauseOnFocus} {autoplayProgressVisible} {dots} + {swiping} on:pageChange={ event => console.log(`Current page index: ${event.detail}`) } @@ -115,6 +121,7 @@ {pauseOnFocus} {autoplayProgressVisible} {dots} + {swiping} > {#each colors2 as { color, text } (color)}