@yatoday/astro-ui 0.17.25 → 0.17.27

package/components/ImageGalleryIkea/ImageGalleryIkea.astro

@@ -190,12 +190,15 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
       const thumbSwiperEl = document.getElementById(`swiper-thumb-${id}`);
       if (!mainSwiperEl || !thumbSwiperEl) return;
 
-      mainSwiperEl.addEventListener('swiperafterinit', () => {
-        (thumbSwiperEl as any)?.swiper.slides.forEach((slide: HTMLElement, index: number) => {
-          slide.addEventListener('mouseenter', () => {
-            (mainSwiperEl as any)?.swiper.slideTo(index);
-          });
-        });
+      // Wire up thumb hover + click → main slide navigation.
+      // Attach to light-DOM swiper-slide elements directly so this does not
+      // depend on the swiperafterinit lifecycle event (which can be flaky with
+      // dynamically registered swiper-element + init="false").
+      const thumbSlides = thumbSwiperEl.querySelectorAll('swiper-slide');
+      thumbSlides.forEach((slide, index) => {
+        const goTo = () => (mainSwiperEl as any)?.swiper?.slideTo(index);
+        slide.addEventListener('mouseenter', goTo);
+        slide.addEventListener('click', goTo);
       });
 
       // Thumb Slider navigation buttons

package/components/ImageGalleryIkea/ImageGalleryIkea.svelte

@@ -32,12 +32,15 @@
       const thumbSwiperEl = document.getElementById(`swiper-thumb-${id}`);
       if (!mainSwiperEl || !thumbSwiperEl) return;
 
-      mainSwiperEl.addEventListener('swiperafterinit', () => {
-        (thumbSwiperEl as any)?.swiper.slides.forEach((slide: HTMLElement, index: number) => {
-          slide.addEventListener('mouseenter', () => {
-            (mainSwiperEl as any)?.swiper.slideTo(index);
-          });
-        });
+      // Wire up thumb hover + click → main slide navigation.
+      // Attach to light-DOM swiper-slide elements directly so this does not
+      // depend on the swiperafterinit lifecycle event (which can be flaky with
+      // dynamically registered swiper-element + init="false").
+      const thumbSlides = thumbSwiperEl.querySelectorAll('swiper-slide');
+      thumbSlides.forEach((slide, index) => {
+        const goTo = () => (mainSwiperEl as any)?.swiper?.slideTo(index);
+        slide.addEventListener('mouseenter', goTo);
+        slide.addEventListener('click', goTo);
       });
 
       // Thumb Slider navigation buttons

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.17.25",
+  "version": "0.17.27",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",
@@ -28,7 +28,7 @@
   "dependencies": {
     "lodash.merge": "^4.6.2",
     "photoswipe": "^5.4.4",
-    "swiper": "^11.2.5",
+    "swiper": "^12.1.2",
     "unpic": "^3.22.0"
   },
   "peerDependencies": {