Carousel: Working dots

src/organisms/Carousel.svelte

@@ -1,6 +1,5 @@
 <script>
     import { onMount } from 'svelte'
-    import { fly } from 'svelte/transition'
     import { currentLocation } from '../store'
     import * as fn from '../functions'
 
@@ -163,17 +162,11 @@
         <div class="carousel__information">
             <div class="carousel__information--location style-location">
                 <p class="street">
-                    {#each photos as photo, index}
-                    <span aria-hidden={photo !== currentPhoto}
-                        class:prev={photo === prevPhoto}
-                        class:active={photo === currentPhoto}
-                        class:next={photo === nextPhoto}>
-                        {photo.name}
-                    </span>
-                    {/each}
+                    {currentPhoto.name}
+                </p>
+                <p class="state style-caps style-caps--transparent">
+                    {currentPhoto.location.region}, {currentPhoto.location.country.name}
                 </p>
-                <p class="state style-caps style-caps--transparent">Add the state!!!</p>
-                <!-- <p class="state style-caps style-caps--transparent">{photo.location.region}, {photo.location.country.name}</p> -->
             </div>
             {#if viewer}
             <p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
@@ -183,8 +176,8 @@
         {#if !viewer}
         <ol class="carousel__dots">
             {#each photos as page, index}
-            <li class:active={index === 0}>
-                <button aria-label="Go to image #{index + 1}"></button>
+            <li class:active={page === currentPhoto} on:click={() => currentIndex = index}>
+                <button aria-label="Go to photo #{index + 1}"></button>
             </li>
             {/each}
         </ol>
@@ -194,7 +187,7 @@
     {#if viewer}
     <ol class="carousel__dots">
         {#each photos as page}
-        <li class:active={false}>
+        <li class:active={page === currentPhoto}>
             <button></button>
         </li>
         {/each}