YAY SLIDER FINALLY DONE HOLY SHIT

package-lock.json

@@ -28,6 +28,7 @@
         "svelte-check": "^2.2.6",
         "svelte-hcaptcha": "^0.1.1",
         "svelte-preprocess": "^4.10.1",
+        "swiper": "^8.2.4",
         "tslib": "^2.3.1",
         "typescript": "~4.6.2"
       }
@@ -991,6 +992,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dev": true,
+      "dependencies": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
@@ -2769,6 +2779,12 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
+      "dev": true
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -2967,6 +2983,30 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/swiper": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.2.4.tgz",
+      "integrity": "sha512-TPq64KiZUt8lZY5ZEg75RjToT+RwfLomfKIpcFLy6+UCUp2kL7hHWslLxjFtcFeiwfG67RHFYbJnq6tsothcJQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
@@ -3984,6 +4024,15 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dev": true,
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "dotenv": {
       "version": "16.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.0.tgz",
@@ -5181,6 +5230,12 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==",
+      "dev": true
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -5291,6 +5346,16 @@
         }
       }
     },
+    "swiper": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.2.4.tgz",
+      "integrity": "sha512-TPq64KiZUt8lZY5ZEg75RjToT+RwfLomfKIpcFLy6+UCUp2kL7hHWslLxjFtcFeiwfG67RHFYbJnq6tsothcJQ==",
+      "dev": true,
+      "requires": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "svelte-check": "^2.2.6",
     "svelte-hcaptcha": "^0.1.1",
     "svelte-preprocess": "^4.10.1",
+    "swiper": "^8.2.4",
     "tslib": "^2.3.1",
     "typescript": "~4.6.2"
   },

src/lib/utils.ts

@@ -0,0 +1,14 @@
+import { supabase } from './supabase';
+
+const setImageUrl = (imageSpec) => {
+  const { publicURL, error } = supabase
+    .storage
+    .from('mistymountains')
+    .getPublicUrl(imageSpec.image);
+  if (!error) {
+    return { ...imageSpec, image: publicURL };
+  }
+  return imageSpec;
+}
+
+export default setImageUrl;

src/routes/index.svelte

@@ -1,6 +1,25 @@
 <div class="row align-items-center py-2">
   <div class="col-md-7">
-    <img src="https://ztxoywaazhxdeiftmsiy.supabase.co/storage/v1/object/public/mistymountains/mountains.png" alt="mountains" class="img-fluid rounded shadow">
+    <Swiper
+        modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
+        class="rounded shadow"
+        spaceBetween={50}
+        slidesPerView={1}
+        autoHeight={true}
+        loop={true}
+        navigation
+        pagination={{ clickable: true }}
+        autoplay={true}
+        speed={1000}
+        on:slideChange={() => console.log('slide change')}
+        on:swiper={(e) => console.log(e.detail[0])}
+    >
+      {#each images as { image, alt } (image)}
+        <SwiperSlide>
+          <img class="image-fluid" style="width:100%" src={image} alt={alt} />
+        </SwiperSlide>
+      {/each}
+    </Swiper>
   </div>
   <div class="col-md-5 my-2">
     <h2>Helping you conquer Mount Doom</h2>
@@ -8,7 +27,7 @@
   </div>
 </div>
 
-<div class="bg-light rounded py-3 shadow">
+<div class="bg-light rounded p-3 shadow">
   <div class="d-flex justify-content-center">
     <div class="col-md-8 mt-2 border-bottom">
       <h3>"Darkness must pass, a new day will come, and when the sun shines, it will shine out the clearer."</h3>
@@ -32,4 +51,25 @@
       </div>
     </div>
   </div>
+  <br>
 </div>
+
+<script>
+  import { supabase } from '$lib/supabase';
+  import setImageUrl from '$lib/utils';
+  import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
+  import { Swiper, SwiperSlide } from 'swiper/svelte';
+  import 'swiper/css';
+  import 'swiper/css/navigation';
+  import 'swiper/css/pagination';
+  import 'swiper/css/scrollbar';
+  import 'swiper/css/autoplay';
+
+  const images = [
+    { image: 'mountains.png', alt: 'Cloudy mountains in a light sky' },
+    { image: 'office-1-1.jpeg', alt: 'Office room one' },
+    { image: 'office-1-2.jpeg', alt: 'Office room one angle two' },
+    { image: 'office-2-1.jpeg', alt: 'Office room two' },
+    { image: 'office-2-2.jpeg', alt: 'Office room two angle two' },
+  ].map(setImageUrl);
+</script>

src/routes/team/index.svelte

@@ -3,6 +3,7 @@
 
   import { onMount } from 'svelte';
   import { supabase } from '$lib/supabase';
+  import setImageUrl from '$lib/utils';
 
   const getPeople = async () => {
     const { data, error } = await supabase.from('people').select().order('id');
@@ -12,22 +13,9 @@
     return [];
   }
 
-  const mapImages = (people) => {
-    return people.map((x) => {
-      const { publicURL, error } = supabase
-        .storage
-        .from('mistymountains')
-        .getPublicUrl(x.image);
-      if (!error) {
-        return { ...x, image: publicURL };
-      }
-      return x;
-    });
-  }
-
   let people = [];
   onMount(async () => {
-    people = await getPeople().then(mapImages);
+    people = await getPeople().then((people) => people.map(setImageUrl));
   });
 </script>