#47 : Add swiping prop

Author: vadimkorr

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

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>