https://www.darmstadt.de/typo3conf/ext/y7web_theme_wda/Resources/Public/js/textimage_slider.js?1755586566

1'use strict';
2
3function initializetextImageSlider() {
4    var textImageSlider = document.querySelectorAll('.textImageSlider-slidercontainer');
5    var textImageSliderList = [];
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    textImageSlider.forEach(function (element, index) {
30        var slider = element.querySelector('.textImageSlider-slider');
31        
32        if (slider != undefined) {
33            let slideAmount = slider.querySelectorAll('.textImageSlider-slide').length;
34
35            textImageSliderList[index] = new Flickity(slider, {
36                wrapAround: false,
37                prevNextButtons: slideAmount > 1,
38                pageDots: slideAmount > 1,
39                contain: true,
40                fade: true,
41                cellAlign: 'left',
42                imagesLoaded: true,
43                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',
44                /*
45                arrowShape: { 
46                    x0: 0,
47                    x1: 50, y1: 50,
48                    x2: 55, y2: 45,
49                    x3: 10
50                },
51                */
52            });
53            if (slideAmount > 1) {
54                buildSliderNavigation(element);
55            }
56        }
57    });
58}
59
60
61
62window.addEventListener('DOMContentLoaded', initializetextImageSlider);