j1-template 2024.3.19 → 2024.3.20

data/assets/theme/j1/modules/swiperjs/css/theme/uno.css

@@ -25,6 +25,15 @@
   --swiper-wrapper-transition-timing-function: initial;
 }
 
+/* Navigation styles
+-------------------------------------------------------------------- */
+:root {
+  --swiper-navigation-color: var(--bs-gray-100);
+  --swiper-navigation-size: 44px;
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 20px;
+}
+
 /* Pagination styles
 -------------------------------------------------------------------- */
 :root {
@@ -34,7 +43,7 @@
   --swiper-pagination-bottom: 8px;
   --swiper-pagination-top: auto;
   --swiper-pagination-fraction-color: inherit;
-  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
+  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
   --swiper-pagination-progressbar-size: 4px;
   --swiper-pagination-bullet-size: 8px;
   --swiper-pagination-bullet-width: 8px;
@@ -61,15 +70,6 @@
   --swiper-scrollbar-size: 4px;
 }
 
-/* Navigation styles
--------------------------------------------------------------------- */
-:root {
-  --swiper-navigation-color: var(--bs-gray-100);
-  --swiper-navigation-size: 44px;
-  --swiper-navigation-top-offset: 50%;
-  --swiper-navigation-sides-offset: 10px;
-}
-
 /* Titles and Captions
 -------------------------------------------------------------------- */
 .swiper-title {
@@ -82,6 +82,7 @@
   font-weight: 500;
   margin-bottom: .5rem;
 }
+
 .swp-caption-content {
   display: none;
   position: absolute; 
@@ -149,8 +150,24 @@ ul.swiper-wrapper {
   left: auto;
 }
 
-/* Navigation
+/* Pagination, absolute (relative to the swiper container/parent)
 -------------------------------------------------------------------------------- */
+.swiper-pagination,
+.swiper-pagination-inner {
+  position: absolute;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+
+.swiper-pagination-outer {
+  padding-top: 12px;
+  bottom: unset !important;
+  text-align: center;
+  transition: 300ms opacity;
+  transform: translate3d(0, 0, 0);
+}
 
 .swiper-pagination-bullet {
   width: 25px !important;
@@ -161,7 +178,7 @@ ul.swiper-wrapper {
   font-weight: 400;
   color: var(--bs-black) !important;
   opacity: .6 !important;
-  background: rgba(0, 0, 0, 0.3) !important
+  background: rgba(0, 0, 0, 0.5) !important
 }
 
 .swiper-pagination-bullet-active {

data/assets/theme/j1/modules/swiperjs/css/theme/uno.min.css

@@ -14,4 +14,4 @@
  # -----------------------------------------------------------------------------
 */
 
-:root{--swiper-theme-color:var(--bs-primary);--swiper-preloader-color:var(--swiper-theme-color);--swiper-wrapper-transition-timing-function:initial}:root{--swiper-pagination-color:var(--swiper-theme-color);--swiper-pagination-left:auto;--swiper-pagination-right:8px;--swiper-pagination-bottom:8px;--swiper-pagination-top:auto;--swiper-pagination-fraction-color:inherit;--swiper-pagination-progressbar-bg-color:rgba(0,0,0,0.25);--swiper-pagination-progressbar-size:4px;--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-width:8px;--swiper-pagination-bullet-height:8px;--swiper-pagination-bullet-border-radius:50%;--swiper-pagination-bullet-inactive-color:#000;--swiper-pagination-bullet-inactive-opacity:.5;--swiper-pagination-bullet-opacity:1;--swiper-pagination-bullet-horizontal-gap:4px;--swiper-pagination-bullet-vertical-gap:6px}:root{--swiper-scrollbar-border-radius:10px;--swiper-scrollbar-top:auto;--swiper-scrollbar-bottom:4px;--swiper-scrollbar-left:auto;--swiper-scrollbar-right:4px;--swiper-scrollbar-sides-offset:1%;--swiper-scrollbar-bg-color:rgba(0,0,0,0.1);--swiper-scrollbar-drag-bg-color:rgba(0,0,0,0.5);--swiper-scrollbar-size:4px}.swiper-title{display:flex;align-items:center;text-rendering:optimizeLegibility;text-align:left;line-height:1.25;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.swp-caption-content{display:none;position:absolute;bottom:0;left:0;width:100%;padding:10px;background:rgba(0,0,0,0.5);color:#fff;font-size:14px;font-weight:400;text-align:left}.swiper-slide:hover .swp-caption-content{display:block}ul.swiper-wrapper{list-style-type:none;margin:0;padding:0;position:relative}.pswp__img{cursor:pointer !important}.swiper-slide{text-align:center;font-size:18px;background:#fff;display:flex;justify-content:center;align-items:center;background-size:cover;background-position:center}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,20px) !important;right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,20px) !important;left:auto}:root{--swiper-navigation-size:44px;--swiper-navigation-top-offset:50%;--swiper-navigation-sides-offset:10px;--swiper-navigation-color:var(--swiper-theme-color)}.swiper-pagination-bullet{width:25px !important;height:25px !important;text-align:center;line-height:25px;font-size:14px;font-weight:400;color:var(--bs-black) !important;opacity:.6 !important;background:rgba(0,0,0,0.3) !important}.swiper-pagination-bullet-active{color:var(--bs-white) !important;background:var(--swiper-theme-color) !important;opacity:1 !important}.autoplay-progress{position:absolute;right:16px;bottom:16px;z-index:10;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-weight:bold;color:var(--swiper-theme-color)}.autoplay-progress svg{--progress:0;position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;stroke-width:4px;stroke:var(--swiper-theme-color);fill:none;stroke-dashoffset:calc(125.6px *(1 - var(--progress)));stroke-dasharray:125.6;transform:rotate(-90deg)}.swiper-text-base{padding:5px 0 5px 15px !important;border-left:5px solid var(--bs-primary)}.swiper-text-base .swiper-wrapper .swiper-slide p{margin-bottom:0 !important;font-size:1.5rem;font-weight:400;text-align:left;color:var(--md-gray-700);background:var(--md-gray-50);overflow-x:hidden}.swiper-text-parallax .swiper-wrapper .swiper-slide p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;font-weight:500;text-align:left;color:rgba(255,255,255,.75);overflow-x:hidden}.swiper--multi{height:400px}
+::root{--swiper-theme-color:var(--bs-primary);--swiper-preloader-color:var(--swiper-theme-color);--swiper-wrapper-transition-timing-function:initial}:root{--swiper-navigation-color:var(--bs-gray-100);--swiper-navigation-size:44px;--swiper-navigation-top-offset:50%;--swiper-navigation-sides-offset:20px}:root{--swiper-pagination-color:var(--swiper-theme-color);--swiper-pagination-left:auto;--swiper-pagination-right:8px;--swiper-pagination-bottom:8px;--swiper-pagination-top:auto;--swiper-pagination-fraction-color:inherit;--swiper-pagination-progressbar-bg-color:rgba(0,0,0,0.25);--swiper-pagination-progressbar-size:4px;--swiper-pagination-bullet-size:8px;--swiper-pagination-bullet-width:8px;--swiper-pagination-bullet-height:8px;--swiper-pagination-bullet-border-radius:50%;--swiper-pagination-bullet-inactive-color:#000;--swiper-pagination-bullet-inactive-opacity:.5;--swiper-pagination-bullet-opacity:1;--swiper-pagination-bullet-horizontal-gap:4px;--swiper-pagination-bullet-vertical-gap:6px}:root{--swiper-scrollbar-border-radius:10px;--swiper-scrollbar-top:auto;--swiper-scrollbar-bottom:4px;--swiper-scrollbar-left:auto;--swiper-scrollbar-right:4px;--swiper-scrollbar-sides-offset:1%;--swiper-scrollbar-bg-color:rgba(0,0,0,0.1);--swiper-scrollbar-drag-bg-color:rgba(0,0,0,0.5);--swiper-scrollbar-size:4px}.swiper-title{display:flex;align-items:center;text-rendering:optimizeLegibility;text-align:left;line-height:1.25;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.swp-caption-content{display:none;position:absolute;bottom:0;left:0;width:100%;padding:10px;background:rgba(0,0,0,0.5);color:#fff;font-size:14px;font-weight:400;text-align:left}.swiper-slide:hover .swp-caption-content{display:block}ul.swiper-wrapper{list-style-type:none;margin:0;padding:0;position:relative}.pswp__img{cursor:pointer !important}.swiper-slide{text-align:center;font-size:18px;background:#fff;display:flex;justify-content:center;align-items:center;background-size:cover;background-position:center}.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,20px) !important;right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,20px) !important;left:auto}.swiper-pagination,.swiper-pagination-inner{position:absolute;text-align:center;transition:300ms opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination-outer{padding-top:12px;bottom:unset !important;text-align:center;transition:300ms opacity;transform:translate3d(0,0,0)}.swiper-pagination-bullet{width:25px !important;height:25px !important;text-align:center;line-height:25px;font-size:14px;font-weight:400;color:var(--bs-black) !important;opacity:.6 !important;background:rgba(0,0,0,0.5) !important}.swiper-pagination-bullet-active{color:var(--bs-white) !important;background:var(--swiper-theme-color) !important;opacity:1 !important}.autoplay-progress{position:absolute;right:16px;bottom:16px;z-index:10;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-weight:bold;color:var(--swiper-theme-color)}.autoplay-progress svg{--progress:0;position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;stroke-width:4px;stroke:var(--swiper-theme-color);fill:none;stroke-dashoffset:calc(125.6px *(1 - var(--progress)));stroke-dasharray:125.6;transform:rotate(-90deg)}.swiper-text-base{padding:5px 0 5px 15px !important;border-left:5px solid var(--bs-primary)}.swiper-text-base .swiper-wrapper .swiper-slide p{margin-bottom:0 !important;font-size:1.5rem;font-weight:400;text-align:left;color:var(--md-gray-700);background:var(--md-gray-50);overflow-x:hidden}.swiper-text-parallax .swiper-wrapper .swiper-slide p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;font-weight:500;text-align:left;color:rgba(255,255,255,.75);overflow-x:hidden}.swiper--multi{height:400px}

data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.js

@@ -0,0 +1,25 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/js/modules/layoutBase.js
+ # J1 Module for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+"use strict";
+function LayoutBase(_ref) {
+  var {
+    swiper,
+    extendParams,
+    params,
+    on
+  } = _ref;
+
+} // END LayoutBase

data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.min.js

@@ -0,0 +1,25 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/js/modules/layoutBase.min.js
+ # J1 Module for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+"use strict";
+function LayoutBase(_ref) {
+  var {
+    swiper,
+    extendParams,
+    params,
+    on
+  } = _ref;
+
+} // END LayoutBase

data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.js

@@ -14,9 +14,7 @@
  # -----------------------------------------------------------------------------
 */
 "use strict";
-
 function LayoutExpanding(_ref) {
-
   var {
     swiper,
     extendParams,
@@ -24,6 +22,4 @@ function LayoutExpanding(_ref) {
     on
   } = _ref;
 
-
-
-} // END ayoutExpanding
+} // END LayoutExpanding

data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.min.js

@@ -14,9 +14,7 @@
  # -----------------------------------------------------------------------------
 */
 "use strict";
-
 function LayoutExpanding(_ref) {
-
   var {
     swiper,
     extendParams,
@@ -24,6 +22,4 @@ function LayoutExpanding(_ref) {
     on
   } = _ref;
 
-
-
-} // END ayoutExpanding
+} // END LayoutExpanding

data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.js

@@ -14,30 +14,28 @@
  # -----------------------------------------------------------------------------
 */
 "use strict";
-
 function LayoutNeighbor(_ref) {
-  var mainSwiper, tripleSwiper;
   var {
-      swiper,
-      extendParams,
-      params,
-      on
+    swiper,
+    params,
+    moduleFound = false
   } = _ref;
 
-  // module options
-  const commonParameters  = params.neighbor;
-  const swiperID          = `#${params.neighbor.swiper_id}`;
-
-  mainSwiper = document.querySelector(swiperID);
+  // collect module settings
+  // ---------------------------------------------------------------------------
+  const commonParameters = params.neighbor;
 
+  moduleFound = j1.adapter.swiper.findModuleByName(swiper.modules, LayoutNeighbor.name);
+  if (!moduleFound) { return; }
 
   // ---------------------------------------------------------------------------
   // effect initializer
   // ---------------------------------------------------------------------------
-  
+
   // main swiper
   //
-  const swiperEl = mainSwiper.querySelector('.swiper');
+  const mainSwiper  = document.querySelector(`#${params.neighbor.swiper_id}`);
+  const swiperEl    = mainSwiper.querySelector('.swiper');
 
   // create neighbor swiper PREV
   //
@@ -91,7 +89,7 @@ function LayoutNeighbor(_ref) {
 
   // init neighbor swiper MAIN
   //
-  tripleSwiper = new Swiper(swiperEl, {
+  const tripleSwiper = new Swiper(swiperEl, {
     ...commonParameters,
     grabCursor: true,
     controller: {

data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.min.js

@@ -13,21 +13,5 @@
  # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
  # -----------------------------------------------------------------------------
 */
-"use strict";
 
-function LayouttNeighbor(_ref) {
-
-    var {
-        swiper,
-        extendParams,
-        on
-    } = _ref;
-
-    extendParams({
-      panoramaEffect: {
-        depth: 200,
-        rotate: 30,
-      },
-    });
-
-} // END LayoutNeighbor
+"use strict";function LayoutNeighbor(e){var r,o,{swiper:s,extendParams:i,params:l,on:n}=e;const t=l.neighbor,c=`#${l.neighbor.swiper_id}`,d=(r=document.querySelector(c)).querySelector(".swiper"),a=d.cloneNode(!0);a.classList.add("neighbor-slider-prev"),r.insertBefore(a,d);const p=a.querySelectorAll(".swiper-slide"),w=p[p.length-1];a.querySelector(".swiper-wrapper").insertBefore(w,p[0]);const u=d.cloneNode(!0);u.classList.add("neighbor-slider-next"),r.appendChild(u);const h=u.querySelectorAll(".swiper-slide")[0];u.querySelector(".swiper-wrapper").appendChild(h),d.classList.add("neighbor-slider-main");const y=new Swiper(a,{...t,allowTouchMove:!1,on:{click(){o.slidePrev()}}}),S=new Swiper(u,{...t,allowTouchMove:!1,on:{click(){o.slideNext()}}});o=new Swiper(d,{...t,grabCursor:!0,controller:{control:[y,S]},on:{destroy(){y.destroy(),S.destroy()}}})}

data/assets/theme/j1/modules/swiperjs/js/modules/layoutPanorama.js

@@ -14,7 +14,6 @@
  # -----------------------------------------------------------------------------
 */
 "use strict";
-
 function LayoutPanorama(_ref) {
   var {
     swiper,

data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.js

@@ -0,0 +1,25 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/js/modules/layoutParallax.js
+ # J1 Module for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+"use strict";
+function LayoutParallax(_ref) {
+  var {
+    swiper,
+    extendParams,
+    params,
+    on
+  } = _ref;
+
+} // END LayoutParallax

data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.min.js

@@ -0,0 +1,25 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/js/modules/layoutParallax.min.js
+ # J1 Module for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+"use strict";
+function LayoutParallax(_ref) {
+  var {
+    swiper,
+    extendParams,
+    params,
+    on
+  } = _ref;
+
+} // END LayoutParallax

data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.0.js

@@ -0,0 +1,114 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/js/modules/layoutStacked.js
+ # J1 Module for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+"use strict";
+
+function LayoutStacked(_ref) {
+
+  var {
+    swiper,
+    params,
+    moduleFound = false
+  } = _ref;
+
+  // collect module settings
+  // ---------------------------------------------------------------------------
+  const commonParameters = params.stacked;
+
+  moduleFound = j1.adapter.swiper.findModuleByName(swiper.modules, LayoutStacked.name);
+  if (!moduleFound) { return; }
+
+  // ---------------------------------------------------------------------------
+  // effect initializer
+  // ---------------------------------------------------------------------------
+
+  // main swiper
+  //
+  const mainSwiper  = document.querySelector(`#${params.stacked.swiper_id}`);
+  const swiperEl    = mainSwiper.querySelector('.swiper');
+
+  const calcNextOffset = () => {
+    const parentWidth = swiperEl.parentElement.offsetWidth;
+    const swiperWidth = swiperEl.offsetWidth;
+    var nextOffset    = (parentWidth - (parentWidth - swiperWidth) / 2) / swiperWidth;
+    var nextOffsetVh  = Math.max(nextOffset, 1) * 100;
+
+    return `${nextOffsetVh}%`;
+  };
+
+  const stackedSwiper = new Swiper(swiperEl, {      
+    effect: 'creative',
+    speed: 600,
+    resistanceRatio: 0,
+    grabCursor: true,
+    parallax: true,
+    pagination: {
+    //el: '.swiper-pagination-outer',
+      el: '.swiper-pagination-inner',
+      type: 'bullets',
+      clickable: true
+    },      
+    creativeEffect: {
+      limitProgress: 3,
+      perspective: true,
+      shadowPerProgress: true,
+      prev: {
+        shadow: true,
+        translate: ['-15%', 0, -200],
+      },
+      next: {
+        translate: [calcNextOffset(), 0, 0],
+      },
+    },
+    on: {
+      init: (swiper) => { var slideHeight = 600; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+    }
+  });
+
+  const onResize = () => {
+    if (!stackedSwiper || stackedSwiper.destroyed) return;
+    // prettier-ignore
+    stackedSwiper.params.creativeEffect.next.translate = [calcNextOffset(), 0, 0];
+    if (
+      stackedSwiper.params.resizeObserver &&
+      typeof window.ResizeObserver !== 'undefined'
+    ) {
+      stackedSwiper.update();
+    }
+  };
+  window.addEventListener('resize', onResize);
+
+
+  // workaround for swiper pagination placed 'outer'
+  // -------------------------------------------------------------------------
+  var init_swiper_delay = 500;
+
+  // {% assign pagination_el       = swiper.module_settings.pagination.el | split: '-' %}
+  // {% assign pagination_position = pagination_el[2] %}
+
+  setTimeout(() => {
+    // const sourceEl = document.getElementById('{{swiper.id}}_pagination');
+    // const targetEl = document.getElementById('{{swiper.id}}');
+    const sourceEl = document.getElementById('stacked_slider_pagination');
+    const targetEl = document.getElementById('stacked_slider_swiper_container');
+    // targetEl.appendChild(sourceEl);
+
+    // logger.debug('\n' + 'pagination elements (outer) moved');
+  }, init_swiper_delay);
+  // -------------------------------------------------------------------------
+
+  // return stackedSwiper;
+
+} // END LayoutStacked

data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.1.js

@@ -0,0 +1,93 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/js/modules/layoutStacked.js
+ # J1 Module for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+"use strict";
+function LayoutStacked(_ref) {
+  var {
+    swiper,
+    params,
+    moduleFound = false
+  } = _ref;
+
+  // collect module settings
+  // ---------------------------------------------------------------------------
+  const commonParameters = params.stacked;
+
+  moduleFound = j1.adapter.swiper.findModuleByName(swiper.modules, LayoutStacked.name);
+  if (!moduleFound) { return; }
+
+  // ---------------------------------------------------------------------------
+  // effect initializer
+  // ---------------------------------------------------------------------------
+
+  // main swiper
+  //
+  // const mainSwiper  = document.querySelector(`#${params.stacked.swiper_id}`);
+  const mainSwiper  = document.querySelector('#swiper_image_stacked');
+  const swiperEl    = mainSwiper.querySelector('.swiper');
+
+  const calcNextOffset = () => {
+    const parentWidth = swiperEl.parentElement.offsetWidth;
+    const swiperWidth = swiperEl.offsetWidth;
+    var nextOffset    = (parentWidth - (parentWidth - swiperWidth) / 2) / swiperWidth;
+    var nextOffsetVh  = Math.max(nextOffset, 1) * 100;
+
+    return `${nextOffsetVh}%`;
+  };
+
+  const stackedSwiper = new Swiper(swiperEl, {      
+    effect: 'creative',
+    speed: 600,
+    resistanceRatio: 0,
+    grabCursor: true,
+    parallax: true,
+    pagination: {
+      el: '.swiper-pagination-inner',
+      type: 'bullets',
+      clickable: true
+    },      
+    creativeEffect: {
+      limitProgress: 3,
+      perspective: true,
+      shadowPerProgress: true,
+      prev: {
+        shadow: true,
+        translate: ['-15%', 0, -200],
+      },
+      next: {
+        translate: [calcNextOffset(), 0, 0],
+      },
+    },
+    on: {
+      init: (swiper) => { var slideHeight = 600; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+    }
+  });
+
+  const onResize = () => {
+    if (!stackedSwiper || stackedSwiper.destroyed) return;
+    // prettier-ignore
+    stackedSwiper.params.creativeEffect.next.translate = [calcNextOffset(), 0, 0];
+    if (
+      stackedSwiper.params.resizeObserver &&
+      typeof window.ResizeObserver !== 'undefined'
+    ) {
+      stackedSwiper.update();
+    }
+  };
+  window.addEventListener('resize', onResize);
+
+  return stackedSwiper;
+
+} // END LayoutStacked

data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.js

@@ -14,17 +14,29 @@
  # -----------------------------------------------------------------------------
 */
 "use strict";
-
 function LayoutStacked(_ref) {
-
   var {
     swiper,
-    extendParams,
     params,
-    on
+    moduleFound = false
   } = _ref;
 
-  const swiperEl = el.querySelector('.swiper');
+  // collect module settings
+  // ---------------------------------------------------------------------------
+  const commonParameters = params.stacked;
+
+  moduleFound = j1.adapter.swiper.findModuleByName(swiper.modules, LayoutStacked.name);
+  if (!moduleFound) { return; }
+
+  // ---------------------------------------------------------------------------
+  // effect initializer
+  // ---------------------------------------------------------------------------
+
+  // main swiper
+  //
+  // const mainSwiper  = document.querySelector(`#${params.stacked.swiper_id}`);
+  const mainSwiper  = document.querySelector('#swiper_image_stacked');
+  const swiperEl    = mainSwiper.querySelector('.swiper');
 
   const calcNextOffset = () => {
     const parentWidth = swiperEl.parentElement.offsetWidth;
@@ -35,12 +47,26 @@ function LayoutStacked(_ref) {
     return `${nextOffsetVh}%`;
   };
 
-  const postersSwiper = new Swiper(swiperEl, {      
+  const onLastSlide = (swiper) => {
+    console.log ('\n' + 'LayoutStacked, Entered event: reachEnd');
+    // swiper.allowTouchMove = false;
+    // swiper.allowSlidePrev = false;
+    // swiper.allowSlideNext = false;
+  };
+
+  const stackedSwiper = new Swiper(swiperEl, {
+    loop: true,
     effect: 'creative',
     speed: 600,
     resistanceRatio: 0,
     grabCursor: true,
     parallax: true,
+    pagination: {
+    //el: '.swiper-pagination-outer',
+      el: '.swiper-pagination-inner',
+      type: 'bullets',
+      clickable: true
+    },      
     creativeEffect: {
       limitProgress: 3,
       perspective: true,
@@ -54,22 +80,25 @@ function LayoutStacked(_ref) {
       },
     },
     on: {
-      init: (swiper) => { var slideHeight = 600; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); }
+      init:     function (swiper) { var slideHeight = 600; swiper.slides.forEach(slide => { slide.style.height = `${slideHeight}px`; }); },
+      reachEnd: function (swiper) { onLastSlide(swiper) }
     }
   });
 
   const onResize = () => {
-    if (!postersSwiper || postersSwiper.destroyed) return;
+    if (!stackedSwiper || stackedSwiper.destroyed) return;
     // prettier-ignore
-    postersSwiper.params.creativeEffect.next.translate = [calcNextOffset(), 0, 0];
+    stackedSwiper.params.creativeEffect.next.translate = [calcNextOffset(), 0, 0];
     if (
-      postersSwiper.params.resizeObserver &&
+      stackedSwiper.params.resizeObserver &&
       typeof window.ResizeObserver !== 'undefined'
     ) {
-      postersSwiper.update();
+      stackedSwiper.update();
     }
   };
   window.addEventListener('resize', onResize);
-  
 
-} // END LayoutStacked
+} // END LayoutStacked
+
+  // Disable touch move (swiping)
+  // swiper.allowTouchMove = false;

data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.min.js

@@ -0,0 +1,17 @@
+/*
+ # -----------------------------------------------------------------------------
+ # ~/assets/theme/j1/modules/swiper/js/modules/layoutStacked.min.js
+ # J1 Module for SwiperJS v11 (layout)
+ # -----------------------------------------------------------------------------
+ #
+ # Product/Info:
+ # http://jekyll.one
+ #
+ # Copyright (C) 2025 Juergen Adams
+ #
+ # J1 Theme is licensed under MIT License.
+ # See: https://github.com/jekyll-one-org/j1-template/blob/main/LICENSE
+ # -----------------------------------------------------------------------------
+*/
+
+"use strict";function LayoutStacked(e){var{swiper:r,extendParams:t,params:s,on:a}=e;const i=el.querySelector(".swiper"),n=()=>{const e=i.parentElement.offsetWidth,r=i.offsetWidth;var t=(e-(e-r)/2)/r;return`${100*Math.max(t,1)}%`},o=new Swiper(i,{effect:"creative",speed:600,resistanceRatio:0,grabCursor:!0,parallax:!0,creativeEffect:{limitProgress:3,perspective:!0,shadowPerProgress:!0,prev:{shadow:!0,translate:["-15%",0,-200]},next:{translate:[n(),0,0]}},on:{init:e=>{e.slides.forEach((e=>{e.style.height="600px"}))}}});window.addEventListener("resize",(()=>{o&&!o.destroyed&&(o.params.creativeEffect.next.translate=[n(),0,0],o.params.resizeObserver&&void 0!==window.ResizeObserver&&o.update())}))}