Add much more responsible Swiper.JS image carousel over self-made one

web/src/components/photos/carousel.astro

@@ -8,66 +8,81 @@ const pb = await authPB()
 const photos = await pb.collection('photos').getFullList({
     sort: '-created'
 })
-
-const getImageLink = async (record: any) => {
-    return pb.files.getURL(record, record.image)
-}
 ---
 
 <script>
-    let pos = 0;
+    import Swiper from 'swiper';
+    import { Navigation, Keyboard, EffectFade } from 'swiper/modules';
+    import 'swiper/css';
+    import 'swiper/css/effect-fade';
+
     const dataElement = document.getElementById('carousel-data');
     const photos = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
-    const cap = photos.length - 1;
-    const img = document.getElementById('carousel-img') as HTMLImageElement;
     const titleEl = document.getElementById('photo-title');
     const cameraEl = document.getElementById('photo-camera');
     const locationEl = document.getElementById('photo-location');
     const currentPosIndicator = document.getElementById('current-pos');
     const maxPosIndicator = document.getElementById('max-pos');
 
-    maxPosIndicator!.innerText = (cap + 1) as string
-    currentPosIndicator!.innerText = (pos + 1) as string
-    
-    function updatePhoto() {
-        const currentPhoto = photos[pos];
+    if (maxPosIndicator) {
+        maxPosIndicator.innerText = String(photos.length);
+    }
+    if (currentPosIndicator) {
+        currentPosIndicator.innerText = '1';
+    }
 
-        currentPosIndicator!.innerText = (pos + 1) as string
-        
-        // Update image src
-        if (img && currentPhoto) {
-            const imageUrl = `/api/files/photos/${currentPhoto.id}/${currentPhoto.image}`;
-            img.src = imageUrl;
+    const swiper = new Swiper('.swiper', {
+        modules: [Navigation, Keyboard, EffectFade],
+        effect: 'cards',
+        fadeEffect: {
+            crossFade: true
+        },
+        speed: 400,
+        navigation: {
+            nextEl: '#inc-button',
+            prevEl: '#dec-button',
+        },
+        keyboard: {
+            enabled: true,
+            onlyInViewport: false,
+        },
+        loop: true,
+        on: {
+            slideChange: function() {
+                const realIndex = this.realIndex;
+                const currentPhoto = photos[realIndex];
+                
+                if (currentPosIndicator) {
+                    currentPosIndicator.innerText = String(realIndex + 1);
+                }
+                
+                if (titleEl && currentPhoto) {
+                    titleEl.textContent = currentPhoto.title || "Untitled";
+                }
+                if (cameraEl && currentPhoto) {
+                    cameraEl.textContent = `📸 ${currentPhoto.camera}`;
+                }
+                if (locationEl && currentPhoto) {
+                    locationEl.textContent = `📌 ${currentPhoto.location}`;
+                }
+            }
         }
-        
-        // Update metadata
-        if (titleEl) {
-            titleEl.textContent = currentPhoto.title || "Untitled";
-        }
-        if (cameraEl) {
-            cameraEl.textContent = `📸 ${currentPhoto.camera}`
-        }
-        if (locationEl) {
-            locationEl.textContent = `📌 ${currentPhoto.location}`
-        }
-    }
-    
-    function inc() { 
-        pos = pos === cap ? 0 : pos + 1;
-        updatePhoto();
-    }
-    
-    function dec() { 
-        pos = pos === 0 ? cap : pos - 1;
-        updatePhoto();
-    }
-    
-    // make functions globally accessible
-    (window as any).inc = inc;
-    (window as any).dec = dec;
+    });
 </script>
 
 <!-- Hidden element to pass server data to client -->
-    <div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
-    
-    <img id="carousel-img" class="w-full md:h-[calc(100vh-7rem)] object-contain" src={ pb.files.getURL(photos[0], photos[0].image) } />
+<div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
+
+<div class="swiper w-full md:h-[calc(100vh-7rem)]">
+    <div class="swiper-wrapper">
+        {photos.map((photo) => (
+            <div class="swiper-slide flex items-center justify-center">
+                <img 
+                    src={pb.files.getURL(photo, photo.image)} 
+                    class="w-full md:h-[calc(100vh-7rem)] object-contain"
+                    alt={photo.title || 'Photo'}
+                />
+            </div>
+        ))}
+    </div>
+</div>

web/src/pages/photos/index.astro

@@ -17,9 +17,9 @@ const photos = await pb.collection('photos').getFullList({
         <p id="photo-camera" class="text-sm">📸 {photos[0].camera}</p>
         <p id="photo-location" class="text-sm">📌 {photos[0].location}</p>
 
-        <button id="dec-button" onclick="dec()">&lt;</button>
+        <!-- <button id="dec-button" onclick="dec()">&lt;</button> -->
         <span id="current-pos" /> of <span id="max-pos" />
-        <button id="inc-button" onclick="inc()">&gt;</button>
+        <!-- <button id="inc-button" onclick="inc()">&gt;</button> -->
 
 
         <!-- <p class="text-2xl">Photography :)</p>