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/organisms/Carousel.svelte

@@ -12,6 +12,7 @@
     // Components
     import IconArrow from '../atoms/IconArrow'
     import Counter from '../atoms/Counter'
+    import PaginationDots from '../molecules/PaginationDots'
 
     // Props
     export let photos
@@ -45,7 +46,6 @@
             currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
         } else {
             currentIndex = direction
-            console.log('Go to photo', direction, currentIndex)
         }
 
         // Send current photo to event
@@ -203,12 +203,8 @@
         </div>
     </div>
 
-    <ol class="carousel__dots">
-        {#each photos as page, index}
-        <li class:active={page === currentPhoto} on:click={() => goToPhoto(index)}>
-            <button aria-label="Go to photo #{index + 1}"></button>
-        </li>
-        {/each}
-    </ol>
+    <PaginationDots {photos} {currentIndex}
+        on:goToIndex={event => currentIndex = event.detail.index}
+    />
 </div>
 {/if}