https://grad-vinkovci.hr/js/news-carousel.js?v=1789680251

1// ============================================================
2
3// Grad Vinkovci – karusel novosti (istaknuta + 2×2 mreža)
4
5// ============================================================
6
7
8
9(function () {
10
11    "use strict";
12
13
14
15    const carousels = document.querySelectorAll(".news-carousel[data-autoplay='1']");
16
17    if (!carousels.length) {
18
19        return;
20
21    }
22
23
24
25    const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
26
27    const INTERVAL = 7000;
28
29
30
31    carousels.forEach(function (carousel) {
32
33        const slides = carousel.querySelectorAll(".news-carousel__slide");
34
35        let dotsWrap = carousel.querySelector(".news-carousel__dots");
36
37        if (!dotsWrap) {
38
39            const layout = carousel.closest(".news-layout--featured");
40
41            dotsWrap = layout ? layout.querySelector(".news-carousel__dots") : null;
42
43        }
44
45
46
47        if (slides.length < 2 || !dotsWrap) {
48
49            return;
50
51        }
52
53
54
55        let current = 0;
56
57        let timer = null;
58
59
60
61        slides.forEach(function (_, i) {
62
63            const dot = document.createElement("button");
64
65            dot.type = "button";
66
67            dot.setAttribute("role", "tab");
68
69            dot.setAttribute("aria-label", "Slajd " + (i + 1));
70
71            dot.setAttribute("aria-selected", i === 0 ? "true" : "false");
72
73            if (i === 0) {
74
75                dot.classList.add("is-active");
76
77            }
78
79            dot.addEventListener("click", function () {
80
81                goTo(i);
82
83                restart();
84
85            });
86
87            dotsWrap.appendChild(dot);
88
89        });
90
91
92
93        const dots = dotsWrap.querySelectorAll("button");
94
95
96
97        function goTo(index) {
98
99            slides[current].classList.remove("is-active");
100
101            dots[current].classList.remove("is-active");
102
103            dots[current].setAttribute("aria-selected", "false");
104
105
106
107            current = (index + slides.length) % slides.length;
108
109
110
111            slides[current].classList.add("is-active");
112
113            dots[current].classList.add("is-active");
114
115            dots[current].setAttribute("aria-selected", "true");
116
117        }
118
119
120
121        function restart() {
122
123            clearInterval(timer);
124
125            timer = null;
126
127            if (reducedMotionQuery.matches) {
128
129                return;
130
131            }
132
133            timer = setInterval(function () {
134
135                goTo(current + 1);
136
137            }, INTERVAL);
138
139        }
140
141
142
143        reducedMotionQuery.addEventListener("change", restart);
144
145        restart();
146
147    });
148
149})();
150
151