https://www.justspices.de/static/version1790005904/frontend/Justsp…/de_DE/JustSpices_Cms/js/js-slider.js

1function slideJavascriptCarousels() {
2    const javascriptSliders = document.querySelectorAll('.javascript-slider-wrapper');
3    javascriptSliders.forEach((javascriptSlider) => {
4        const carouselItems = javascriptSlider.querySelectorAll('.javascript-slider div');
5
6        if(carouselItems.length > 0){
7            const buttonLeft = javascriptSlider.querySelector('.button_left');
8            const buttonRight = javascriptSlider.querySelector('.button_right');
9            const itemWidth = carouselItems[0].offsetWidth;
10            const javascriptInnerSlider = javascriptSlider.querySelector('.javascript-slider');
11            const containerWidth = javascriptInnerSlider.offsetWidth;
12            const scrollWidth = javascriptInnerSlider.scrollWidth;
13            const maxScroll = scrollWidth - containerWidth;
14            let currentPosition = 0;
15
16            buttonLeft.addEventListener('click', () => {
17                if (currentPosition > 0) {
18                    currentPosition -= itemWidth;
19                    currentPosition = Math.max(currentPosition, 0); // Ensure position is not negative
20                    javascriptInnerSlider.scrollTo({
21                        left: currentPosition,
22                        behavior: 'smooth'
23                    });
24                    updateButtonVisibility();
25                }
26            });
27
28            buttonRight.addEventListener('click', () => {
29                if (currentPosition < maxScroll) {
30                    currentPosition += itemWidth;
31                    currentPosition = Math.min(currentPosition, maxScroll); // Ensure position does not exceed maxScroll
32                    javascriptInnerSlider.scrollTo({
33                        left: currentPosition,
34                        behavior: 'smooth'
35                    });
36                    updateButtonVisibility();
37                }
38            });
39
40            function updateButtonVisibility() {
41                if (currentPosition === 0) {
42                    buttonLeft.style.display = 'none';
43                    javascriptSlider.classList.add('no-left');
44                } else {
45                    buttonLeft.style.display = 'block';
46                    javascriptSlider.classList.remove('no-left');
47                }
48
49                if (currentPosition >= maxScroll || maxScroll < 30) {
50                    buttonRight.style.display = 'none';
51                    javascriptSlider.classList.add('no-right');
52                } else {
53                    buttonRight.style.display = 'block';
54                    javascriptSlider.classList.remove('no-right');
55                }
56            }
57
58            updateButtonVisibility(); // Initial button visibility
59            currentPosition = 0
60            javascriptInnerSlider.scrollTo({
61                left: currentPosition,
62                behavior: 'smooth'
63            });
64        }
65    });
66}