Carousel: Use the counter as a component

- Add animation when changing photos
- Reusable and scalable to more than XX photos

src/organisms/Carousel.svelte

@@ -11,6 +11,7 @@
 
     // Components
     import IconArrow from '../atoms/IconArrow'
+    import Counter from '../atoms/Counter'
 
     // Props
     export let photos
@@ -42,6 +43,9 @@
         } else if (direction === 'next') {
             currentIndex++
             currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
+        } else {
+            currentIndex = direction
+            console.log('Go to photo', direction, currentIndex)
         }
 
         // Send current photo to event
@@ -182,9 +186,7 @@
             </div>
 
             {#if viewer}
-            <div class="carousel__number">
-                {currentIndex < 10 ? 0 : ''}{photos.length - currentIndex}
-            </div>
+            <Counter {currentIndex} className="carousel__number" />
             {/if}
         </div>
 
@@ -207,25 +209,13 @@
             <p class="carousel__date">{formatDate(currentPhoto.date, 'FULL')}</p>
             {/if}
         </div>
-
-        {#if !viewer}
-        <ol class="carousel__dots">
-            {#each photos as page, index}
-            <li class:active={page === currentPhoto} on:click={() => currentIndex = index}>
-                <button aria-label="Go to photo #{index + 1}"></button>
-            </li>
-            {/each}
-        </ol>
-        {/if}
     </div>
 
-    {#if viewer}
     <ol class="carousel__dots">
-        {#each photos as page}
-        <li class:active={page === currentPhoto}>
-            <button></button>
+        {#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>
-    {/if}
 </div>