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,35 +135,44 @@
 </script>
 
 <div class="main-container">
-  {#if arrows}
+  <div class="carousel-container">
-  <div class="side-container">
+    {#if arrows}
-    <span
+    <div class="side-container">
-      class="clickable"
+      <span
-      on:click={showPrevPage}
+        class="clickable"
-    >&lt;</span>
+        on:click={showPrevPage}
-  </div>
+      >&lt;</span>
-  {/if}
-  <div
-    class="content-container"
-    bind:this={contentContainerElement}
-  >
-    <div
-      style="
-        transform: translateX({offset}px);
-        transition-duration: {speed}ms;
-      "
-      bind:this={innerContentContainerElement}
-    >
-      <slot></slot>
     </div>
+    {/if}
+    <div
+      class="content-container"
+      bind:this={contentContainerElement}
+    >
+      <div
+        style="
+          transform: translateX({offset}px);
+          transition-duration: {speed}ms;
+        "
+        bind:this={innerContentContainerElement}
+      >
+        <slot></slot>
+      </div>
+    </div>
+    {#if arrows}
+    <div class="side-container">
+      <span
+        class="clickable"
+        on:click={showNextPage}
+      >&gt;</span>
+    </div>
+    {/if}
   </div>
-  {#if arrows}
+  {#if dots}
-  <div class="side-container">
+    <Dots
-    <span
+      {pagesCount}
-      class="clickable"
+      currentPageIndex={$store.currentItemIndex}
-      on:click={showNextPage}
+      on:pageChange={handlePageChange}
-    >&gt;</span>
+    ></Dots>
-  </div>
   {/if}
 </div>
 
@@ -161,6 +180,12 @@
   .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,
+  component: ImageCarouselView
-  argTypes: {
-    arrows: { control: 'boolean' },
-  },
 };
 
 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