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)}
\ No newline at end of file + diff --git a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte index 70e1f61..cd7a489 100644 --- a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte +++ b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte @@ -56,6 +56,11 @@ */ export let dots = true + /** + * Enable swiping + */ + export let swiping = true + const colors = [ '#e5f9f0', '#ccf3e2', @@ -83,6 +88,7 @@ {pauseOnFocus} {autoplayProgressVisible} {dots} + {swiping} let:showPrevPage let:showNextPage > @@ -138,4 +144,4 @@ cursor: pointer; -webkit-tap-highlight-color: transparent; } - \ No newline at end of file + diff --git a/src/components/Carousel/stories/CarouselViewCustomDots.svelte b/src/components/Carousel/stories/CarouselViewCustomDots.svelte index 8e0cc72..de97c0d 100644 --- a/src/components/Carousel/stories/CarouselViewCustomDots.svelte +++ b/src/components/Carousel/stories/CarouselViewCustomDots.svelte @@ -56,6 +56,11 @@ */ export let dots = true + /** + * Enable swiping + */ + export let swiping = true + function onPageChange(event, showPage) { showPage(Number(event.target.value)) } @@ -87,6 +92,7 @@ {pauseOnFocus} {autoplayProgressVisible} {dots} + {swiping} let:currentPageIndex let:pagesCount let:showPage @@ -148,4 +154,4 @@ width: 100px; border-radius: 5px; } - \ No newline at end of file + diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx index a7b28c4..d9ad74e 100644 --- a/src/docs/Carousel.svx +++ b/src/docs/Carousel.svx @@ -273,6 +273,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 |