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>

src/docs/Carousel.svx

@@ -4,6 +4,7 @@
   import Color from './components/Color.svelte'
   import AlbumsPreview from './components/AlbumsPreview/AlbumsPreview.svelte'
   import Divider from './components/Divider.svelte'
+  import CustomDot from './components/CustomDot.svelte'
   import images from './data/images.json'
   import colors from './data/colors.json'
 </script>
@@ -104,7 +105,7 @@
 
 <Divider />
 
-## Arrows customizing
+## Arrows customization
 <Carousel
   let:showPrevPage
   let:showNextPage
@@ -139,6 +140,49 @@
 
 <Divider />
 
+## Dots customization
+<Carousel
+  let:currentPageIndex
+  let:pagesCount
+  let:showPage
+>
+  <div slot="dots" class="custom-dots">
+    {#each Array(pagesCount) as _, pageIndex (pageIndex)}
+      <CustomDot
+        symbol={pageIndex + 1}
+        active={currentPageIndex === pageIndex}
+        on:click={() => showPage(pageIndex)}
+      ></CustomDot>
+    {/each}
+  </div>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+
+```jsx
+<Carousel
+  let:currentPageIndex
+  let:pagesCount
+  let:showPage
+>
+  <div slot="dots" class="custom-dots">
+    {#each Array(pagesCount) as _, pageIndex (pageIndex)}
+      <CustomDot
+        symbol={pageIndex + 1}
+        active={currentPageIndex === pageIndex}
+        on:click={() => showPage(pageIndex)}
+      ></CustomDot>
+    {/each}
+  </div>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+```
+
+<Divider />
+
 ## Use case
 <AlbumsPreview />
 
@@ -309,4 +353,13 @@ Slot props:
     transform: rotate(-45deg);
     left: -4px;
   }
+
+  /* custom dots */
+  .custom-dots {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: 0 20px;
+  }
 </style>

src/docs/components/CustomDot.svelte

@@ -0,0 +1,45 @@
+<script>
+  /**
+   * Indicates if dot is active
+   */
+  export let active = false
+
+  /**
+   * Symbol to show
+   */
+  export let symbol = ''
+</script>
+
+<div
+  class="custom-dot__dot-container"
+  class:custom-dot__dot-container_active={active}
+  on:click
+>
+  <span class="custom-dot__symbol">{symbol}</span>
+</div>
+
+<style>
+  .custom-dot__dot-container {
+    height: 25px;
+    width: 25px;
+    background-color: #727272;
+    border-radius: 50%;
+    opacity: 0.7;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 5px;
+  }
+  .custom-dot__dot-container:hover {
+    opacity: 0.9;
+  }
+  .custom-dot__dot-container_active {
+    background-color: #009800;
+  }
+  .custom-dot__symbol {
+    font-size: 14px;
+    font-weight: bold;
+    color: #eaeaea;
+  }
+</style>