@widelab-nc/widelab 1.1.32 → 1.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widelab-nc/widelab",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "description": "Widelab starter template based on Finsweet template + add-ons.",
   "homepage": "https://widelab.co",
   "license": "ISC",

package/src/index.js

@@ -1324,6 +1324,73 @@ window.heroSliders = function(e) {
 }
 
 
+// Splide without GSAP; pagination inserted as first child INSIDE .splide
+window.awwwardsSliders = function (el) {
+  if (el.dataset.splideInitialized === '1') return;
+
+  // 1) Find or create Splide root
+  let root = el.classList?.contains('splide') ? el : el.closest?.('.splide');
+  const track = el.querySelector?.('.splide__track') || el.closest?.('.splide__track');
+
+  if (!root && track) {
+    root = document.createElement('div');
+    root.className = 'splide testimonial';
+    track.parentNode.insertBefore(root, track);
+    root.appendChild(track);
+  }
+
+  // 2) Validate structure
+  if (!root || !root.querySelector('.splide__track') || !root.querySelector('.splide__list')) {
+    console.warn('[awwwardsSliders] Missing required Splide structure.');
+    return;
+  }
+
+  // 3) Splide config
+  const config = {
+    type: 'loop',
+    perPage: 1,
+    perMove: 1,
+    gap: '0px',
+    arrows: false,
+    pagination: true,
+    drag: false,
+    speed: 300,
+    easing: 'cubic-bezier(0.83, 0, 0.17, 1)',
+    classes: {
+      pagination: 'splide__pagination awwwards-pagination',
+      page: 'splide__pagination__page awwwards-page',
+    },
+    breakpoints: {
+      992: { drag: true },
+    },
+  };
+
+  const splide = new Splide(root, config).mount();
+
+  // 4) Move pagination INSIDE .splide as FIRST child
+  splide.on('pagination:mounted', (data) => {
+    const list = data.list;
+    if (list && root.firstChild) {
+      root.insertBefore(list, root.firstChild);
+    }
+  });
+
+  // Fallback if pagination already exists
+  queueMicrotask(() => {
+    const list = root.querySelector('.splide__pagination');
+    const track = root.querySelector('.splide__track');
+    if (list && track && list.nextSibling !== track) {
+      root.insertBefore(list, track);
+    }
+  });
+
+  // 5) Click-to-next on desktop
+  if (window.innerWidth > 992) {
+    root.addEventListener('click', () => splide.go('+1'));
+  }
+
+  el.dataset.splideInitialized = '1';
+};
 
 // Sliders on Services page
 window.servicesSliders = function(e) {