Carousel: Use the counter as a component

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

src/atoms/Counter.svelte

@@ -0,0 +1,37 @@
+<script>
+    import { onMount } from 'svelte'
+
+    // Props
+    export let currentIndex = 0
+    export let className = null
+
+    // Variables
+    $: actualIndex = currentIndex + 1
+    $: amount = String(actualIndex).length
+    $: index = (actualIndex < 10) ? String(actualIndex).padStart(2, '0') : String(actualIndex)
+    $: digits = index.split('')
+    let counter
+    const numbers = [...Array(10).keys()]
+
+
+    /*
+    ** Run code when mounted
+    */
+    onMount(() => {
+        // Set each digit column's height = its spans combined (in order to translate in tens of %)
+        counter.querySelectorAll('div').forEach(column => {
+            const spans = column.querySelectorAll('span')
+            column.style.height = spans[0].offsetHeight * spans.length + 'px'
+        })
+    })
+</script>
+
+<div class="counter {className}" bind:this={counter}>
+    {#each digits as digit}
+    <div class="counter__column" style="transform: translateY(-{digit}0%);">
+        {#each numbers as number}
+        <span>{number}</span>
+        {/each}
+    </div>
+    {/each}
+</div>