Fix dot click index, add customization examples, code cleanup

src/components/Carousel/Carousel.svelte

@@ -129,8 +129,8 @@
     }
   })
 
-  function handlePageChange(event) {
-    showPage(event.detail + Number(infinite), { offsetDelay: 0, animated: true })
+  function handlePageChange(pageIndex) {
+    showPage(pageIndex + Number(infinite), { offsetDelay: 0, animated: true })
   }
 
   function offsetPage(animated) {
@@ -225,12 +225,12 @@
       name="dots"
       currentPageIndex={originalCurrentPageIndex}
       pagesCount={originalPagesCount}
-      showPage={pageIndex => showPage(pageIndex, { offsetDelay: 0, animated: true })}
+      showPage={handlePageChange}
     >
       <Dots
         pagesCount={originalPagesCount}
         currentPageIndex={originalCurrentPageIndex}
-        on:pageChange={handlePageChange}
+        on:pageChange={event => handlePageChange(event.detail)}
       ></Dots>
     </slot>
   {/if}

src/components/Dot/Dot.svelte

@@ -2,10 +2,10 @@
   import { tweened } from 'svelte/motion';
   import { cubicInOut } from 'svelte/easing';
 
-  const sizePx = 5
-  const sizeCurrentPx = 8
+  const DOT_SIZE_PX = 5
+  const ACTIVE_DOT_SIZE_PX = 8
 
-  const size = tweened(sizePx, {
+  const size = tweened(DOT_SIZE_PX, {
     duration: 250,
     easing: cubicInOut
   });
@@ -16,14 +16,14 @@
   export let active = false
 
   $: {
-    size.set(active ? sizeCurrentPx : sizePx)
+    size.set(active ? ACTIVE_DOT_SIZE_PX : DOT_SIZE_PX)
   }
 </script>
 
 <div class="sc-carousel-dot__container">
   <div
     class="sc-carousel-dot__dot"
-    class:sc-carousel-dot__dot_current={active}
+    class:sc-carousel-dot__dot_active={active}
     style="
       height: {$size}px;
       width: {$size}px;
@@ -51,7 +51,7 @@
   .sc-carousel-dot__dot:hover {
     opacity: 0.9;
   }
-  .sc-carousel-dot__dot_current {
+  .sc-carousel-dot__dot_active {
     opacity: 0.7;
   }
 </style>