https://www.darmstadt.de/typo3conf/ext/y7web_theme_wda/Resources/P…/js/contentsectiontop_slider.js?1755586578

1'use strict';
2
3function initializeContentSlider() {
4    var contentSlider = document.querySelectorAll('.sectionpage-slider-wrapper');
5    var contentSliderList = [];
6
7    function setAriaLabelforPageDots(dots) {
8        const dotElements = dots.querySelectorAll('.dot');
9
10        dotElements.forEach((dot, index) => {
11            const slideNumber = index + 1;
12            const text = `Slide ${slideNumber}`;
13            dot.ariaLabel = text;
14        })
15    }
16
17    function buildSliderNavigation(sliderWrapper) {
18        var dots = sliderWrapper.querySelector('.flickity-page-dots');
19        var arrowPrev = sliderWrapper.querySelector('.flickity-button.previous');
20        var arrowNext = sliderWrapper.querySelector('.flickity-button.next');
21        var navigationContainer = sliderWrapper.querySelector('.slider-navigation-container');
22
23        setAriaLabelforPageDots(dots);
24        navigationContainer.appendChild(arrowPrev);
25        navigationContainer.appendChild(dots);
26        navigationContainer.appendChild(arrowNext);
27    }
28
29    function resetSliderHeight(slider) {
30        slider.element.querySelector('.flickity-viewport').style.height = '0';
31        slider.resize();
32    }
33
34    contentSlider.forEach(function (element, index) {
35        var slider = element.querySelector('.sectionpage-slider');
36
37        if (slider != undefined) {
38            contentSliderList[index] = new Flickity(slider, {
39                wrapAround: true,
40                prevNextButtons: true,
41                contain: true,
42                cellAlign: 'left',
43                imagesLoaded: true,
44                autoPlay: 6000,
45                arrowShape: 'M37.1,17.9c-1.7-1.7-4.6-1.7-6.3,0L1.2,47.5c-1.4,1.4-1.4,3.6,0,5l29.6,29.6c1.7,1.7,4.6,1.7,6.3,0c1.7-1.7,1.7-4.6,0-6.3L11.3,50l25.8-25.8C38.9,22.5,38.9,19.6,37.1,17.9z',
46                /*
47                arrowShape: { 
48                    x0: 0,
49                    x1: 50, y1: 50,
50                    x2: 55, y2: 45,
51                    x3: 10
52                },
53                */
54            });
55
56            // Fixes a bug that prevents slider from reducing its height when resized.
57            // Bug is caused by min-height: 100% on articles - which is required to size images correctly
58            window.addEventListener('resize', function() {
59                resetSliderHeight(contentSliderList[index]);
60            });
61
62            buildSliderNavigation(element);
63        }
64    });
65}
66
67
68
69window.addEventListener('DOMContentLoaded', initializeContentSlider);