https://www.zettec.de/_assets/d8c770632cf3475a4f5235bb32b72617/Jav…/Extensions/serviceslider.js?1712062861

1(function () {
2    $(document).ready(function () {
3        // Observe if there really is a change of the size of the slider
4        var targetNode = document.querySelector('.slider');
5        const resizewatcher = new ResizeObserver(entries => {
6            initializeSlider(jQuery('.slider'));
7            resizeSlider();
8            initializeAutoSlide(jQuery('.slider'));
9            autoSlide();
10        })
11        resizewatcher.observe(targetNode);
12
13        randomOrder();
14        slideSlider();
15        onTabResize();
16    });
17
18    function initializeSlider($sliders) {
19        $sliders.each(function () {
20            jQuery(this).data('numberOfItemsToShow', getNumberOfItemsToShow(jQuery(this)));
21        });
22    }
23
24    function initializeAutoSlide($sliders) {
25        $sliders.each(function () {
26            var $slider = jQuery(this);
27            var $sliderComponents = jQuery(this).find('.slider__itemwrap, .slider__prev, .slider__next');
28            if (!$slider.data('speed')) {
29                return;
30            }
31            $sliderComponents.on('mouseenter mouseleave', function (e) {
32                if (e.type === 'mouseenter') {
33                    clearInterval($slider[0].autoSlideInterval);
34                } else {
35                    startAutoSlide($slider);
36                }
37            });
38        });
39    }
40
41    function randomOrder() {
42        jQuery('.slider').each(function () {
43            var $slider = jQuery(this);
44            if ($slider.data('order') === 'random') {
45                var $sliderItems = $slider.find('.slider__item');
46                while ($sliderItems.length) {
47                    $slider.find('.slider__itemwrap').append($sliderItems.splice(Math.floor(Math.random() * $sliderItems.length), 1)[0]);
48                }
49            }
50        });
51    }
52
53    function autoSlide() {
54        jQuery('.slider').each(function () {
55            var $slider = jQuery(this);
56            clearInterval($slider[0].autoSlideInterval);
57            if ($slider.data('speed')) {
58                startAutoSlide($slider);
59            }
60        });
61    }
62
63    function startAutoSlide($slider) {
64        var $sliderItems = $slider.find('.slider__item');
65        var numberOfAllItems = $sliderItems.length;
66        var numberOfItemsToShow = $slider.data('numberOfItemsToShow');
67        var $lastItem = $slider.find('.slider__item:last-child');
68        var itemWidth = Math.round($lastItem.width());
69        var speed = $slider.data('speed');
70
71        // Don't slide, when number of elements is equal or less than the free slots
72        if (Math.round($lastItem.position().left) <= (itemWidth * (numberOfItemsToShow - 1))) {
73            return;
74        }
75
76        clearInterval($slider[0].autoSlideInterval);
77        $slider[0].autoSlideInterval = setInterval(function () {
78            var counter = 0;
79            var left = 0;
80            $sliderItems.each(function () {
81                if ($(this).is(':animated')) {
82                    return;
83                }
84                if (Math.round($lastItem.position().left) === (itemWidth * (numberOfItemsToShow - 1))) {
85                    // set left position for each item when last item has been reached
86                    if (numberOfAllItems === 1) {
87                        left = Math.round(($slider.find('.slider__itemwrap').width() - itemWidth) / 2);
88                        $(this).css('left', left);
89                    } else {
90                        if (counter < numberOfAllItems) {
91                            jQuery(this).animate({'left': Math.round(left)}, 400, 'swing', function () {
92                                checkArrowVisibility($slider);
93                            });
94                        } else {
95                            left = 0;
96                        }
97                        counter++;
98                        left = left + itemWidth;
99                    }
100                } else {
101                    // slide to next item
102                    var newLeft = '';
103                    var oldLeft = Math.round(jQuery(this).position().left);
104                    newLeft = oldLeft - itemWidth;
105
106                    jQuery(this).animate({'left': Math.round(newLeft)}, 400, 'linear', function () {
107                        checkArrowVisibility($slider);
108                    });
109
110                    checkArrowVisibility($slider);
111                }
112            });
113        }, speed);
114    }
115
116    function onTabResize() {
117        $('.tabs__button').each(function () {
118            var myhash = $(this).attr('data-target');
119            var targetNode = document.querySelector(myhash);
120
121            const resizewatcher = new ResizeObserver(entries => {
122                resizeSlider();
123            })
124
125            resizewatcher.observe(targetNode)
126        });
127    }
128
129    function resizeSlider() {
130        jQuery('.slider').each(function () {
131            var $slider = jQuery(this);
132
133            var $sliderItems = $slider.find(".slider__item");
134
135            if ($sliderItems.length != 0) {
136                var wrapWidth = $slider.find('.slider__itemwrap').width();
137                var numberOfAllItems = $sliderItems.length;
138                var numberOfItemsToShow = $slider.data('numberOfItemsToShow');
139                var itemWidth = Math.round((wrapWidth) / numberOfItemsToShow);
140                $sliderItems.width(itemWidth);

141
142                // get height of highest item
143                var max = -1;
144                $slider.find('.slider__iteminner').each(function () {
145                    var h = jQuery(this).outerHeight();
146                    max = h > max ? h : max;
147                });
148
149                // set max height to container
150                $slider.find('.slider__itemwrap').height(max);
151
152                // set left position for each item
153                var counter = 0;
154                var left = 0;
155                $sliderItems.each(function () {
156                    if (numberOfAllItems === 1) {
157                        jQuery(this).css('left', left);
158                    } else {
159                        if (counter < numberOfAllItems) {
160                            jQuery(this).css('left', left);
161                        } else {
162                            left = 0;
163                        }
164                        counter++;
165                        left = left + itemWidth;
166                    }
167                });
168            }
169
170            checkArrowVisibility($slider);
171
172            if ($sliderItems.length !== 0) {
173                setSliderItemHeight($slider);
174            }
175        });
176    }
177
178    function slideSlider() {
179        jQuery('.slider').each(function () {
180            var $slider = jQuery(this);
181
182            slideContentSliderOnClick($slider, $slider.find('.slider__next'));
183            slideContentSliderOnClick($slider, $slider.find('.slider__prev'), true);
184        });
185    }
186
187    function slideContentSliderOnClick($slider, $arrow, isPrevArrow = false) {
188        $arrow.click(function () {
189            if (jQuery(this).hasClass('disabled')) {
190                return false;
191            } else {
192                $slider.find(".slider__item").each(function () {
193                    if (!$(this).is(":animated")) {
194                        var newLeft = '';
195                        var oldLeft = Math.round(jQuery(this).position().left);
196                        var itemWidth = Math.round(jQuery(this).width());
197
198                        if (isPrevArrow) {
199                            newLeft = oldLeft + itemWidth;
200                        } else {
201                            newLeft = oldLeft - itemWidth;
202                        }
203
204                        jQuery(this).animate({'left': newLeft}, 400, 'swing', function () {
205                            checkArrowVisibility($slider);
206                        });
207
208                        checkArrowVisibility($slider);
209                    }
210                });
211            }
212        });
213    }
214
215    function checkArrowVisibility($slider) {
216        if ($slider.find('.slider__item').length == 0) {
217            $slider.find('.slider__prev').hide();
218            $slider.find('.slider__next').hide();
219        } else {
220            var numberOfItemsToShow = $slider.data('numberOfItemsToShow');
221
222            // check for prev arrow
223            if ($slider.find('.slider__item:first-child').position().left === 0) {
224                $slider.find('.slider__prev').addClass('disabled');
225            } else {
226                $slider.find('.slider__prev').removeClass('disabled');
227            }
228
229            // check for next arrow
230            if ($slider.find('.slider__item').length > numberOfItemsToShow) {
231                if ($slider.find('.slider__item:nth-last-child(' + numberOfItemsToShow + ')').position().left === 0) {
232                    $slider.find('.slider__next').addClass('disabled');
233                } else {
234                    $slider.find('.slider__next').removeClass('disabled');
235                }
236            } else {
237                $slider.find('.slider__next').addClass('disabled');
238            }
239        }
240    }
241
242    function getNumberOfItemsToShow($slider) {
243        // slidecount is the number of slider items to be shown in the desktop layout
244        var numberOfItemsToShow = $slider.data('slideCount') || 1;
245        var windowMapping = [
246            {
247                minWidth: 1580,
248                map: {}
249            },
250            {
251                minWidth: 1280,
252                map: {
253                    6: 5,
254                    5: 4,
255                    4: 3,
256                    3: 2
257                }
258            },
259            {
260                minWidth: 800,
261                map: {
262                    6: 4,
263                    5: 3,
264                    4: 2,
265                    3: 2,
266                    2: 1
267                }
268            },
269            {
270                minWidth: 640,
271                map: {
272                    6: 3,
273                    5: 2,
274                    4: 1,
275                    3: 1,
276                    2: 1
277                }
278            },
279            {
280                minWidth: 0,
281                map: {
282                    6: 2,
283                    5: 1,
284                    4: 1,
285                    3: 1,
286                    2: 1
287                }
288            },
289        ];
290
291        for (var windowMap of windowMapping) {
292            if (jQuery(window).width() > windowMap.minWidth) {
293                if (windowMap.map[numberOfItemsToShow]) {
294                    numberOfItemsToShow = windowMap.map[numberOfItemsToShow];
295                }
296                break;
297            }
298        }
299
300        return numberOfItemsToShow;
301    }
302
303    function setSliderItemHeight($slider) {
304        if ($slider.data('itemHeight') === 'equal') {
305            var $sliderItems = $slider.find('.slider__iteminner');
306            var max = -1;
307
308            $sliderItems.outerHeight('auto');
309            $sliderItems.each(function () {
310                var h = jQuery(this).outerHeight();
311                max = h > max ? h : max;
312            });
313
314            $sliderItems.outerHeight(max);
315        }
316    }
317})();