Use a component for carousel dots

- Show 5 dots by default
- First and last one from current index are smaller
- Other ones are hidden

src/molecules/PaginationDots.svelte

@@ -0,0 +1,21 @@
+<script>
+    import { createEventDispatcher } from 'svelte'
+    const dispatch = createEventDispatcher()
+
+    // Props
+    export let photos
+    export let currentIndex
+</script>
+
+<ol class="carousel__dots">
+    {#each photos as dot, index}
+    <li
+        class:active={index === currentIndex}
+        class:small={index < currentIndex - 2 || index > currentIndex + 2}
+        class:hidden={index < currentIndex - 3 || index > currentIndex + 3}
+        on:click={() => dispatch('goToIndex', { index })}
+    >
+        <button aria-label="Go to photo #{index + 1}"></button>
+    </li>
+    {/each}
+</ol>