#31 : Add new demos

.babelrc

@@ -7,6 +7,9 @@
       }
     }]
   ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ],
   "env": {
     "test": {
       "presets": [["@babel/preset-env"]]

src/docs/Carousel.svx

@@ -76,6 +76,58 @@
 
 <Divider />
 
+## Autoplay with duration progress
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+
+```jsx
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+```
+
+<Divider />
+
+## Autoplay with pause on focus
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+  pauseOnFocus
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+
+```jsx
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+  pauseOnFocus
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+```
+
+<Divider />
+
 ## Lazy loading of images
 <Carousel
   let:loaded
@@ -219,8 +271,8 @@ Import component
 | `autoplay`           | `boolean`  | `false`         | Enables auto play of pages                    |
 | `autoplayDuration`   | `number`   | `3000`          | Autoplay change interval (ms)                 |
 | `autoplayDirection`  | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |
-| `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
 | `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
+| `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
 </div>