Fix dot click index, add customization examples, code cleanup

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>