Add dots

src/Dots.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+  const dispatch = createEventDispatcher()
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 1
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 0
+
+  function handleDotClick(pageIndex) {
+    dispatch('pageChange', pageIndex)
+  }
+</script>
+
+<div class="main-container">
+  {#each Array(pagesCount) as _, pageIndex}
+    <div class="dot-container">
+      <div
+        class="dot"
+        class:current="{currentPageIndex === pageIndex}"
+        on:click={() => handleDotClick(pageIndex)}
+      ></div>
+    </div>
+  {/each}  
+</div>
+
+<style>
+  :root {
+    --dot-size: 10px; 
+  }
+  .main-container {
+    display: flex;
+    align-items: center;
+  }
+  .dot-container {
+    height: calc(var(--dot-size) + 10px);
+    width: calc(var(--dot-size) + 10x);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dot {
+    height: var(--dot-size);
+    width: var(--dot-size);
+    background-color: #aaa;
+    border-radius: 50%;
+    display: inline-block;
+    opacity: 0.5;
+    margin: 3px;
+    cursor: pointer;
+  }
+  .dot:hover {
+    opacity: 0.9;
+  }
+  .current {
+    height: calc(var(--dot-size) + 3px);
+    width: calc(var(--dot-size) + 3px);
+    opacity: 0.7;
+  }
+</style>

src/ImageCarousel.svelte

@@ -10,6 +10,7 @@
     getSlideSize,
     getIsNotCompletePage
   } from './utils/size'
+  import Dots from './Dots.svelte'
 
   /**
    * Enable Next/Prev arrows
@@ -51,6 +52,11 @@
    */
   export let autoplayDirection = 'next'
 
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
   let pagesCount = 0
   let contentContainerWidth = 0
   let offset
@@ -106,6 +112,10 @@
     }
   })
 
+  function handlePageChange(event) {
+    showPage(event.detail)
+  }
+
   function applyOffset() {
     offset = -$store.currentItemIndex * contentContainerWidth
   }
@@ -125,6 +135,7 @@
 </script>
 
 <div class="main-container">
+  <div class="carousel-container">
     {#if arrows}
     <div class="side-container">
       <span
@@ -156,11 +167,25 @@
     </div>
     {/if}
   </div>
+  {#if dots}
+    <Dots
+      {pagesCount}
+      currentPageIndex={$store.currentItemIndex}
+      on:pageChange={handlePageChange}
+    ></Dots>
+  {/if}
+</div>
 
 <style>
   .main-container {
     display: flex;
     width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+  .carousel-container {
+    display: flex;
+    width: 100%;
   }
   .content-container {
     flex: 1;

src/stories/Dots.stories.js

@@ -0,0 +1,13 @@
+import DotsView from './DotsView.svelte';
+
+export default {
+  title: 'Dots',
+  component: DotsView
+};
+
+const Template = ({ ...args }) => ({
+  Component: DotsView,
+  props: args
+});
+
+export const Primary = Template.bind({});

src/stories/DotsView.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Dots from '../Dots.svelte'
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 5
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 3
+
+  function handlePageChange(event) {
+    currentPageIndex = event.detail
+  }
+</script>
+
+<Dots
+  {pagesCount}
+  {currentPageIndex}
+  on:pageChange={handlePageChange}
+>
+</Dots>

src/stories/ImageCarousel.stories.js

@@ -2,18 +2,12 @@ import ImageCarouselView from './ImageCarouselView.svelte';
 
 export default {
   title: 'ImageCarousel',
-  component: ImageCarouselView,
-  argTypes: {
-    arrows: { control: 'boolean' },
-  },
+  component: ImageCarouselView
 };
 
 const Template = ({ ...args }) => ({
   Component: ImageCarouselView,
-  props: args,
+  props: args
 });
 
 export const Primary = Template.bind({});
-Primary.args = {
-  arrows: true
-};

src/stories/ImageCarouselView.svelte

@@ -41,6 +41,11 @@
    */
   export let autoplayDirection = 'next'
 
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
   const colors = [
     '#e5f9f0',
     '#ccf3e2',
@@ -65,6 +70,7 @@
     {autoplay}
     {autoplaySpeed}
     {autoplayDirection}
+    {dots}
   >
     {#each colors as color (color)}
       <div