https://antwerpgiants.be/hero-slideshow.js?v=20260911c

1/* ==========================================================
2   HERO SLIDESHOW — wisselt tussen het Giants-logo en foto's
3   uit Afbeeldingen/Hero/ (hero-1.jpg, hero-2.jpg, ...).
4
5   - Ontbrekende foto's worden automatisch overgeslagen.
6   - Slide 1 (het logo) blijft altijd in rotatie.
7   - Autoplay elke 6 seconden, pauzeert bij hover/focus.
8   - Manuele navigatie met pijlen en dots.
9   - Respecteert prefers-reduced-motion (dan geen autoplay).
10========================================================== */
11(function(){
12  var root = document.getElementById('heroSlideshow');
13  if (!root) return;
14
15  var slides = Array.prototype.slice.call(root.querySelectorAll('.hero-slide'));
16  var dotsHost = document.getElementById('heroDots');
17  var prevBtn = root.querySelector('.hero-arrow-prev');
18  var nextBtn = root.querySelector('.hero-arrow-next');
19
20  /* ---------- Stap 1: gooi slides eruit waar de afbeelding niet bestaat ---------- */
21  /* (geldt ook voor logo-slides: als het PNG ontbreekt, tonen we geen lege slide) */
22  var checks = slides.map(function(slide){
23    var img = slide.querySelector('img');
24    if (!img) return Promise.resolve({ slide: slide, ok: false });
25    if (img.complete && img.naturalWidth > 0) return Promise.resolve({ slide: slide, ok: true });
26    if (img.complete && img.naturalWidth === 0) return Promise.resolve({ slide: slide, ok: false });
27    return new Promise(function(resolve){
28      img.addEventListener('load', function(){ resolve({ slide: slide, ok: img.naturalWidth > 0 }); }, { once: true });
29      img.addEventListener('error', function(){ resolve({ slide: slide, ok: false }); }, { once: true });
30    });
31  });
32
33  Promise.all(checks).then(function(results){
34    var kept = [];
35    results.forEach(function(r){
36      if (r.ok) { kept.push(r.slide); }
37      else { r.slide.parentNode && r.slide.parentNode.removeChild(r.slide); }
38    });
39    initSlideshow(kept);
40  });
41
42  /* ---------- Stap 2: slideshow starten ---------- */
43  function initSlideshow(list){
44    if (!list.length) return;
45
46    // Als er enkel het logo is, verberg navigatie — één statische slide
47    if (list.length === 1) {
48      prevBtn && prevBtn.setAttribute('hidden', '');
49      nextBtn && nextBtn.setAttribute('hidden', '');
50      return;
51    }
52
53    // Dots bouwen
54    if (dotsHost) {
55      dotsHost.innerHTML = '';
56      list.forEach(function(_, i){
57        var b = document.createElement('button');
58        b.type = 'button';
59        b.className = 'hero-dot';
60        b.setAttribute('aria-label', 'Slide ' + (i + 1));
61        b.addEventListener('click', function(){ goTo(i, true); });
62        dotsHost.appendChild(b);
63      });
64    }
65
66    var idx = 0;
67    setActive(0);
68
69    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
70    var timer = null;
71    var hovering = false;
72    var INTERVAL = 6000;
73
74    function start(){
75      if (reduce || hovering) return;
76      stop();
77      timer = setInterval(function(){ goTo(idx + 1, false); }, INTERVAL);
78    }
79    function stop(){ if (timer) { clearInterval(timer); timer = null; } }
80
81    function goTo(n, userInitiated){
82      idx = ((n % list.length) + list.length) % list.length;
83      setActive(idx);
84      if (userInitiated) start(); // reset timer (start checkt zelf of hovering)
85    }
86
87    function setActive(n){
88      list.forEach(function(s, i){
89        s.classList.toggle('is-active', i === n);
90      });
91      if (dotsHost) {
92        Array.prototype.forEach.call(dotsHost.children, function(d, i){
93          d.classList.toggle('is-active', i === n);
94          d.setAttribute('aria-current', i === n ? 'true' : 'false');
95        });
96      }
97    }
98
99    prevBtn && prevBtn.addEventListener('click', function(){ goTo(idx - 1, true); });
100    nextBtn && nextBtn.addEventListener('click', function(){ goTo(idx + 1, true); });
101
102    // Keyboard support
103    root.addEventListener('keydown', function(e){
104      if (e.key === 'ArrowLeft')  { e.preventDefault(); goTo(idx - 1, true); }
105      if (e.key === 'ArrowRight') { e.preventDefault(); goTo(idx + 1, true); }
106    });
107
108    root.addEventListener('mouseenter', function(){ hovering = true;  stop();  });
109    root.addEventListener('mouseleave', function(){ hovering = false; start(); });
110    root.addEventListener('focusin',    stop);
111    root.addEventListener('focusout',   start);
112    start();
113  }
114})();