astro-swiper 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-swiper",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Astro component for swiper, dedicated to slider / carousel / photo swiper / slide, including thumbnails",
   "type": "module",
   "main": "index.js",
@@ -35,9 +35,9 @@
   },
   "packageManager": "pnpm@10.30.3",
   "devDependencies": {
-    "@biomejs/biome": "^2.4.4",
-    "@types/node": "^24.11.0",
-    "astro": "^5.18.0",
+    "@biomejs/biome": "^2.4.9",
+    "@types/node": "^24.12.0",
+    "astro": "^5.18.1",
     "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.9.3"
@@ -58,6 +58,6 @@
     "thumbnail"
   ],
   "dependencies": {
-    "swiper": "^12.1.2"
+    "swiper": "^12.1.3"
   }
 }

package/src/components/Swiper.astro

@@ -69,12 +69,16 @@ const {
         delete _useDelaySwiper[delayedClass]; // remove it from the delayed list
         const delayedOptions = _useOptions[delayedClass];
         delayedOptions.thumbs = {
-          swiper: _useSwiper[delayedThumbClass],    // add the thumbnail swiper link to the options
+          swiper: _useSwiper[delayedThumbClass], // add the thumbnail swiper link to the options
           ...delayedOptions.thumbs,
         };
 
-        _createSwiperAndObserver(delayedClass, delayedOptions, (document.querySelector(`.${delayedClass}`) as AstroSwiper));
-        _useOptions[delayedClass] = delayedOptions;   // update the options with the thumbnail link
+        _createSwiperAndObserver(
+          delayedClass,
+          delayedOptions,
+          document.querySelector(`.${delayedClass}`) as AstroSwiper,
+        );
+        _useOptions[delayedClass] = delayedOptions; // update the options with the thumbnail link
       }
     });
   }
@@ -97,42 +101,43 @@ const {
 
   function _createObserver(uniqueClass: string, options: AstroSwiperOptions, element: AstroSwiper) {
     const observerOptions = options.astro?.intersectionObserver || {};
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting) {
-          if (observerOptions?.initSwiper && !element.astroSwiper) {
-            _initSwiper(uniqueClass, options, element);
-            if (observerOptions?.disconnectOnInit) {
-              observer.disconnect();
-            }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        if (observerOptions?.initSwiper && !element.astroSwiper) {
+          _initSwiper(uniqueClass, options, element);
+          if (observerOptions?.disconnectOnInit) {
+            observer.disconnect();
           }
         }
+      }
 
-        const swiper = element?.astroSwiper
-        if (!swiper) {
-          return;
-        }
+      const swiper = element?.astroSwiper;
+      if (!swiper) {
+        return;
+      }
 
-        if (observerOptions?.controlAutoplay && options.autoplay) {
-          if (entries[0].isIntersecting) {
-            swiper.autoplay.start();
-          } else {
-            swiper.autoplay.stop();
-          }
+      if (observerOptions?.controlAutoplay && options.autoplay) {
+        if (entries[0].isIntersecting) {
+          swiper.autoplay.start();
+        } else {
+          swiper.autoplay.stop();
         }
-      },
-      observerOptions.options,
-    );
+      }
+    }, observerOptions.options);
 
     observer.observe(element);
-    window.addEventListener("unload", observer.disconnect);
+    window.addEventListener('unload', observer.disconnect);
   }
 
   // create the swiper and the observer
   // - init the swiper if it should not be done by the observer
   // - create the observer if required
-  function _createSwiperAndObserver(uniqueClass: string, options: AstroSwiperOptions, element: AstroSwiper) {
-    if (!(options.astro?.intersectionObserver?.initSwiper)) {
+  function _createSwiperAndObserver(
+    uniqueClass: string,
+    options: AstroSwiperOptions,
+    element: AstroSwiper,
+  ) {
+    if (!options.astro?.intersectionObserver?.initSwiper) {
       // create the swiper immediatly
       _initSwiper(uniqueClass, options, element);
     }

package/src/components/SwiperLazyPreloader.astro

@@ -0,0 +1,19 @@
+---
+// Copyright (c) Pascal Brand
+// MIT License
+
+import 'swiper/css/bundle';
+
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'div'> {
+  /** add the default swiper class, true by default */
+  addDefaultClass?: boolean;
+}
+
+const { class: className = null, addDefaultClass = true, ...props } = Astro.props;
+---
+
+<div class:list={[addDefaultClass ? 'swiper-lazy-preloader' : null, className]} {...props}>
+  <slot />
+</div>

package/src/index.ts

@@ -7,7 +7,7 @@ import type { HTMLAttributes } from 'astro/types';
 /** Swiper options for the Astro component.
  * Basically the same as the original SwiperOptions, but extended
  * with new capabilities
-*/
+ */
 export interface AstroSwiperOptions extends SwiperOptions {
   /** options specific to astro-swiper component */
   astro?: {
@@ -25,10 +25,10 @@ export interface AstroSwiperOptions extends SwiperOptions {
       controlAutoplay?: boolean;
       /** options for the IntersectionObserver */
       options?: IntersectionObserverInit;
-    }
+    };
     /** TODO: uniqueClass and linkToThumbUniqueClass may be part of it */
-  }
-};
+  };
+}
 
 /** properties passed to the <Swiper> component
  * It extends a div (that is may have class, style,...), plus other attributes
@@ -69,6 +69,7 @@ export interface AstroSwiperType extends HTMLAttributes<'div'> {
 export { default as Swiper } from './components/Swiper.astro';
 export { default as SwiperButtonNext } from './components/SwiperButtonNext.astro';
 export { default as SwiperButtonPrev } from './components/SwiperButtonPrev.astro';
+export { default as SwiperLazyPreloader } from './components/SwiperLazyPreloader.astro';
 export { default as SwiperPagination } from './components/SwiperPagination.astro';
 export { default as SwiperScrollbar } from './components/SwiperScrollbar.astro';
 export { default as SwiperSlide } from './components/SwiperSlide.astro';