https://www.suter-meggen.ch/app/js/inux-slider.js?uid=6ac29c075ade9

1(function () {
2    function initSlider(root) {
3        if (!root || root.dataset.initialized === '1') {
4            return;
5        }
6        root.dataset.initialized = '1';
7
8        var track = root.querySelector('.inux-slider-track');
9        if (!track) {
10            return;
11        }
12
13        var slides = Array.prototype.slice.call(track.querySelectorAll('.inux-slide'));
14        if (!slides.length) {
15            return;
16        }
17
18        var dots = Array.prototype.slice.call(root.querySelectorAll('.inux-dot'));
19        var thumbs = Array.prototype.slice.call(root.querySelectorAll('.inux-thumb'));
20        var navButtons = dots.concat(thumbs);
21        var thumbsContainer = root.querySelector('.inux-thumbs');
22        var prevButton = root.querySelector('.inux-arrow-prev');
23        var nextButton = root.querySelector('.inux-arrow-next');
24        var viewport = root.querySelector('.inux-slider-viewport') || root;
25        var wrapper = root.closest('.element') || root.parentNode;
26        var siblingNodes = [];
27        var currentSibling = root.nextElementSibling;
28        while (currentSibling) {
29            siblingNodes.push(currentSibling);
30            currentSibling = currentSibling.nextElementSibling;
31        }
32
33        function queryFirstInNodes(nodes, selectors) {
34            for (var nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++) {
35                var node = nodes[nodeIndex];
36                if (!node || typeof node.querySelector !== 'function') {
37                    continue;
38                }
39
40                for (var selectorIndex = 0; selectorIndex < selectors.length; selectorIndex++) {
41                    var found = node.querySelector(selectors[selectorIndex]);
42                    if (found) {
43                        return found;
44                    }
45                }
46            }
47
48            return null;
49        }
50
51        var titleLink = queryFirstInNodes(siblingNodes, [
52            '[data-slider-title-link]',
53            '.slider-title a',
54            '.title a',
55            'h2 a',
56            'a'
57        ]);
58        if (!titleLink && wrapper) {
59            titleLink = queryFirstInNodes([wrapper], [
60                '[data-slider-title-link]',
61                '.slider-title a',
62                '.title a',
63                'h2 a'
64            ]);
65        }
66
67        var extraText = queryFirstInNodes(siblingNodes, [
68            '[data-slider-extra-text]',
69            '.slider-extratext',
70            '.extratext',
71            'small.extratext',
72            'small',
73            'p'
74        ]);
75        if (!extraText && wrapper) {
76            extraText = queryFirstInNodes([wrapper], [
77                '[data-slider-extra-text]',
78                '.slider-extratext',
79                '.extratext'
80            ]);
81        }
82        var autoplayMs = parseInt(root.getAttribute('data-autoplay-ms') || '0', 10);
83        var currentIndex = 0;
84        var timer = null;
85        var touchStartX = 0;
86        var touchStartY = 0;
87        var touchDeltaX = 0;
88        var touchDeltaY = 0;
89        var isTouchTracking = false;
90        var didSwipe = false;
91
92        function clamp(value, min, max) {
93            return Math.min(Math.max(value, min), max);
94        }
95
96        function updateThumbNavState() {
97            if (!thumbsContainer) {
98                return;
99            }
100
101            var maxScrollLeft = Math.max(thumbsContainer.scrollWidth - thumbsContainer.clientWidth, 0);
102            var hasOverflow = maxScrollLeft > 1;
103            root.classList.toggle('has-thumb-overflow', hasOverflow);
104        }
105
106        function scrollThumbIntoView(index, behavior) {
107            if (!thumbsContainer || !thumbs[index]) {
108                return;
109            }
110
111            var thumb = thumbs[index];
112            var targetScrollLeft = thumb.offsetLeft - ((thumbsContainer.clientWidth - thumb.offsetWidth) / 2);
113            var maxScrollLeft = Math.max(thumbsContainer.scrollWidth - thumbsContainer.clientWidth, 0);
114
115            thumbsContainer.scrollTo({
116                left: clamp(targetScrollLeft, 0, maxScrollLeft),
117                behavior: behavior || 'smooth'
118            });
119        }
120
121        function stopSlideVideo(slide) {
122            if (!slide || !slide.classList.contains('inux-slide-video')) {
123                return;
124            }
125
126            var iframe = slide.querySelector('.inux-video-frame');
127            slide.classList.remove('is-playing');
128
129            if (iframe) {
130                iframe.setAttribute('src', '');
131            }
132        }
133
134        function stopAllVideos() {
135            for (var i = 0; i < slides.length; i++) {
136                stopSlideVideo(slides[i]);
137            }
138        }
139
140        function playSlideVideo(slide) {
141            if (!slide || !slide.classList.contains('inux-slide-video')) {
142                return;
143            }
144
145            var youtubeUrl = slide.getAttribute('data-youtube-url') || '';
146            var iframe = slide.querySelector('.inux-video-frame');
147            if (!youtubeUrl || !iframe) {
148                return;
149            }
150
151            stopAutoplay();
152            stopAllVideos();
153            slide.classList.add('is-playing');
154            iframe.setAttribute('src', youtubeUrl);
155        }
156
157        function render(index) {
158            currentIndex = index;
159            track.style.transform = 'translateX(-' + (index * 100) + '%)';
160            stopAllVideos();
161
162            for (var i = 0; i < navButtons.length; i++) {
163                var buttonIndex = parseInt(navButtons[i].getAttribute('data-index') || '-1', 10);
164                navButtons[i].classList.toggle('is-active', buttonIndex === index);
165            }
166
167            scrollThumbIntoView(index, 'smooth');
168            updateThumbNavState();
169
170            var activeSlide = slides[index];
171            if (titleLink) {
172                var newTitle = activeSlide.getAttribute('data-text1') || '';
173                var newHref = activeSlide.getAttribute('data-href') || '#';
174                titleLink.textContent = newTitle;
175                titleLink.setAttribute('title', newTitle);
176                titleLink.setAttribute('href', newHref);
177            }
178
179            if (extraText) {
180                extraText.textContent = activeSlide.getAttribute('data-text2') || '';
181            }
182        }
183
184        function goTo(index) {
185            var max = slides.length - 1;
186            if (index < 0) {
187                index = max;
188            }
189            if (index > max) {
190                index = 0;
191            }
192            render(index);
193        }
194
195        function startAutoplay() {
196            if (timer || autoplayMs <= 0 || slides.length <= 1) {
197                return;
198            }
199
200            timer = window.setInterval(function () {
201                goTo(currentIndex + 1);
202            }, autoplayMs);
203        }
204
205        function stopAutoplay() {
206            if (!timer) {
207                return;
208            }
209
210            window.clearInterval(timer);
211            timer = null;
212        }
213
214        function handleSwipeGesture() {
215            var absX = Math.abs(touchDeltaX);
216            var absY = Math.abs(touchDeltaY);
217            var minSwipe = 40;
218
219            if (absX < minSwipe || absX <= absY) {
220                return;
221            }
222
223            stopAutoplay();
224            goTo(touchDeltaX < 0 ? currentIndex + 1 : currentIndex - 1);

225            didSwipe = true;
226        }
227
228        if (prevButton) {
229            prevButton.addEventListener('click', function (event) {
230                stopAutoplay();
231                goTo(currentIndex - 1);
232                if (event.detail > 0 && typeof this.blur === 'function') {
233                    this.blur();
234                }
235            });
236        }
237
238        if (nextButton) {
239            nextButton.addEventListener('click', function (event) {
240                stopAutoplay();
241                goTo(currentIndex + 1);
242                if (event.detail > 0 && typeof this.blur === 'function') {
243                    this.blur();
244                }
245            });
246        }
247
248        for (var slideIndex = 0; slideIndex < slides.length; slideIndex++) {
249            (function (index) {
250                var slide = slides[index];
251                if (!slide.classList.contains('inux-slide-video')) {
252                    return;
253                }
254
255                var shell = slide.querySelector('.inux-video-shell');
256                if (!shell) {
257                    return;
258                }
259
260                shell.addEventListener('click', function (event) {
261                    if (event.target && event.target.classList.contains('inux-video-frame')) {
262                        return;
263                    }
264
265                    event.preventDefault();
266                    event.stopPropagation();
267
268                    if (currentIndex !== index) {
269                        goTo(index);
270                    }
271                    playSlideVideo(slide);
272                });
273            })(slideIndex);
274        }
275
276        for (var navIndex = 0; navIndex < navButtons.length; navIndex++) {
277            navButtons[navIndex].addEventListener('click', function (event) {
278                stopAutoplay();
279                var targetIndex = parseInt(this.getAttribute('data-index') || '0', 10);
280                goTo(targetIndex);
281                if (event.detail > 0 && typeof this.blur === 'function') {
282                    this.blur();
283                }
284            });
285        }
286
287        if (thumbsContainer) {
288            thumbsContainer.addEventListener('scroll', updateThumbNavState, { passive: true });
289        }
290
291        window.addEventListener('resize', updateThumbNavState);
292
293        viewport.addEventListener('touchstart', function (event) {
294            if (!event.touches || event.touches.length !== 1) {
295                return;
296            }
297
298            isTouchTracking = true;
299            didSwipe = false;
300            touchStartX = event.touches[0].clientX;
301            touchStartY = event.touches[0].clientY;
302            touchDeltaX = 0;
303            touchDeltaY = 0;
304        }, { passive: true });
305
306        viewport.addEventListener('touchmove', function (event) {
307            if (!isTouchTracking || !event.touches || event.touches.length !== 1) {
308                return;
309            }
310
311            touchDeltaX = event.touches[0].clientX - touchStartX;
312            touchDeltaY = event.touches[0].clientY - touchStartY;
313
314            // Keep vertical page scrolling, but block default while swiping horizontally.
315            if (Math.abs(touchDeltaX) > Math.abs(touchDeltaY) && Math.abs(touchDeltaX) > 10) {
316                event.preventDefault();
317            }
318        }, { passive: false });
319
320        viewport.addEventListener('touchend', function () {
321            if (!isTouchTracking) {
322                return;
323            }
324
325            handleSwipeGesture();
326            isTouchTracking = false;
327        }, { passive: true });
328
329        viewport.addEventListener('touchcancel', function () {
330            isTouchTracking = false;
331            touchDeltaX = 0;
332            touchDeltaY = 0;
333        }, { passive: true });
334
335        viewport.addEventListener('click', function (event) {
336            if (!didSwipe) {
337                return;
338            }
339
340            event.preventDefault();
341            event.stopPropagation();
342            didSwipe = false;
343        }, true);
344
345        render(0);
346        scrollThumbIntoView(0, 'auto');
347        updateThumbNavState();
348        startAutoplay();
349    }
350
351    function initAll() {
352        var sliders = document.querySelectorAll('.inux-slider');
353        for (var i = 0; i < sliders.length; i++) {
354            initSlider(sliders[i]);
355        }
356    }
357
358    if (document.readyState === 'loading') {
359        document.addEventListener('DOMContentLoaded', initAll);
360    } else {
361        initAll();
362    }
363})();