https://www.the50.com/filestore/js/ecosystem-cards.js

1// IIFE: promotional-content.js already defines a global whenSlidesReady — keep ours scoped.
2(() => {
3  'use strict';
4
5  document.addEventListener('DOMContentLoaded', () => {
6    const blocks = document.querySelectorAll('.ecosystem-cards');
7    if (!blocks.length) return;
8
9    blocks.forEach((block, i) => {
10      const heading = block.querySelector('.ecosystem-cards-title');
11      if (heading) {
12        heading.id = `ecosystem-cards-heading-${i}`;
13        block.setAttribute('aria-labelledby', heading.id);
14      }
15
16      const el = block.querySelector('.swiper');
17      if (!el) return;
18
19      const wrapper = el.querySelector('.swiper-wrapper') || el;
20
21      // Webpuzzle injects the cards after DOMContentLoaded — wait for them.
22      whenSlidesReady(wrapper, {
23        onReady: () => initSwiper(block, el),
24        onEmpty: () => {
25          block.hidden = true;
26        },
27        timeout: 8000,
28      });
29    });
30  });
31
32  function whenSlidesReady(wrapper, { onReady, onEmpty, timeout = 4500 }) {
33    const hasSlides = () => !!wrapper.querySelector('.swiper-slide');
34    if (hasSlides()) {
35      onReady();
36      return;
37    }
38
39    let settled = false;
40    let observer;
41    let timer;
42    let debounce;
43
44    const finish = (callback) => {
45      if (settled) return;
46      settled = true;
47      clearTimeout(timer);
48      clearTimeout(debounce);
49      if (observer) observer.disconnect();
50      callback();
51    };
52
53    observer = new MutationObserver(() => {
54      if (!hasSlides()) return;
55      clearTimeout(debounce);
56      debounce = setTimeout(() => finish(onReady), 50);
57    });
58    observer.observe(wrapper, { childList: true, subtree: true });
59    timer = setTimeout(() => finish(onEmpty), timeout);
60  }
61
62  function initSwiper(block, el) {
63    if (typeof Swiper === 'undefined') return;
64
65    new Swiper(el, {
66      slidesPerView: 'auto',
67      spaceBetween: 16,
68      watchOverflow: true,
69      rewind: true,
70      simulateTouch: false,
71      observer: true,
72      observeParents: true,
73      navigation: {
74        prevEl: block.querySelector('.ecosystem-cards-prev'),
75        nextEl: block.querySelector('.ecosystem-cards-next'),
76      },
77      pagination: {
78        el: block.querySelector('.ecosystem-cards-pagination'),
79        type: 'progressbar',
80      },
81      keyboard: { enabled: true },
82      a11y: {
83        prevSlideMessage: 'Previous categories',
84        nextSlideMessage: 'Next categories',
85      },
86    });
87  }
88})();