Merge pull request #51 from vadimkorr/feature/#47-add-disabling-swipe-by-prop

feature/#47 Add disabling swipe by prop

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
 

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) {

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)}
       <div
@@ -145,4 +152,4 @@
     font-style: italic;
     font-size: 18px;
   }
-</style>
+</style>

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;
   }
-</style>
+</style>

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;
   }
-</style>
+</style>

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                                |
 
 <Divider />