|
120 | 120 | {{ end }} |
121 | 121 | </div> |
122 | 122 |
|
123 | | -<!-- Enhanced Navigation Dots - Maximum visibility on light backgrounds --> |
124 | | -{{ if gt $slide_count 1 }} |
125 | | -<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3"> |
126 | | - {{ range $index, $item := $block.content.slides }} |
127 | | - <button type="button" |
128 | | - class="w-5 h-5 rounded-lg transition-all duration-300 |
129 | | - border-2 backdrop-blur-md shadow-xl |
130 | | - {{ if eq $index 0 }} |
131 | | - bg-white border-gray-900 shadow-gray-900/70 |
132 | | - ring-2 ring-gray-900/40 ring-offset-2 ring-offset-white/20 |
133 | | - {{ else }} |
134 | | - bg-gray-900/70 border-white/80 shadow-black/60 |
135 | | - hover:bg-gray-900/90 hover:border-white |
136 | | - hover:shadow-black/80 hover:scale-125 |
137 | | - hover:ring-2 hover:ring-white/50 |
138 | | - {{ end }}" |
139 | | - aria-current="{{ if eq $index 0 }}true{{ else }}false{{ end }}" |
140 | | - aria-label="Slide {{ add $index 1 }}" |
141 | | - data-carousel-slide-to="{{ $index }}"></button> |
| 123 | + <!-- Enhanced Navigation Dots - Maximum visibility on light backgrounds --> |
| 124 | + {{ if gt $slide_count 1 }} |
| 125 | + <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3"> |
| 126 | + {{ range $index, $item := $block.content.slides }} |
| 127 | + <button type="button" |
| 128 | + class="w-5 h-5 rounded-lg transition-all duration-300 |
| 129 | + border-2 backdrop-blur-md shadow-xl |
| 130 | + {{ if eq $index 0 }} |
| 131 | + bg-white border-gray-900 shadow-gray-900/70 |
| 132 | + ring-2 ring-gray-900/40 ring-offset-2 ring-offset-white/20 |
| 133 | + {{ else }} |
| 134 | + bg-gray-900/70 border-white/80 shadow-black/60 |
| 135 | + hover:bg-gray-900/90 hover:border-white |
| 136 | + hover:shadow-black/80 hover:scale-125 |
| 137 | + hover:ring-2 hover:ring-white/50 |
| 138 | + {{ end }}" |
| 139 | + aria-current="{{ if eq $index 0 }}true{{ else }}false{{ end }}" |
| 140 | + aria-label="Slide {{ add $index 1 }}" |
| 141 | + data-carousel-slide-to="{{ $index }}"></button> |
| 142 | + {{ end }} |
| 143 | + </div> |
142 | 144 | {{ end }} |
143 | | -</div> |
144 | | -{{ end }} |
145 | 145 |
|
146 | 146 | <!-- Navigation controls - Enhanced visibility for all backgrounds --> |
147 | 147 | {{ if gt $slide_count 1 }} |
|
183 | 183 |
|
184 | 184 | </div> |
185 | 185 |
|
186 | | -{{/* Enhanced Carousel JavaScript */}} |
| 186 | +{{/* Fixed Carousel JavaScript with proper autoplay configuration */}} |
187 | 187 | <script> |
188 | 188 | document.addEventListener('DOMContentLoaded', function() { |
189 | 189 | const carousel = document.getElementById('{{ $hash_id }}'); |
|
216 | 216 | // Update indicators |
217 | 217 | indicators.forEach((indicator, i) => { |
218 | 218 | if (i === index) { |
219 | | - indicator.classList.remove('bg-opacity-30'); |
220 | | - indicator.classList.add('bg-white'); |
| 219 | + indicator.classList.remove('bg-gray-900/70', 'border-white/80'); |
| 220 | + indicator.classList.add('bg-white', 'border-gray-900'); |
221 | 221 | indicator.setAttribute('aria-current', 'true'); |
222 | 222 | } else { |
223 | | - indicator.classList.add('bg-opacity-30'); |
224 | | - indicator.classList.remove('bg-white'); |
| 223 | + indicator.classList.add('bg-gray-900/70', 'border-white/80'); |
| 224 | + indicator.classList.remove('bg-white', 'border-gray-900'); |
225 | 225 | indicator.setAttribute('aria-current', 'false'); |
226 | 226 | } |
227 | 227 | }); |
|
263 | 263 | }); |
264 | 264 | }); |
265 | 265 |
|
266 | | - // Auto-play functionality (if enabled) |
267 | | - {{ if $block.design.autoplay }} |
| 266 | + // Auto-play functionality - Fixed to use your YAML configuration |
| 267 | + {{ $autoplay := $block.design.loop | default false }} |
| 268 | + {{ $interval := $block.design.interval | default 5000 }} |
| 269 | + {{ if $autoplay }} |
268 | 270 | function startAutoplay() { |
269 | | - autoplayInterval = setInterval(nextSlide, {{ $block.design.autoplay_interval | default 5000 }}); |
| 271 | + autoplayInterval = setInterval(nextSlide, {{ $interval }}); |
270 | 272 | } |
271 | 273 |
|
272 | 274 | function stopAutoplay() { |
|
294 | 296 | if (e.key === 'ArrowLeft') { |
295 | 297 | e.preventDefault(); |
296 | 298 | prevSlide(); |
297 | | - {{ if $block.design.autoplay }}resetAutoplay();{{ end }} |
| 299 | + {{ if $autoplay }}resetAutoplay();{{ end }} |
298 | 300 | } else if (e.key === 'ArrowRight') { |
299 | 301 | e.preventDefault(); |
300 | 302 | nextSlide(); |
301 | | - {{ if $block.design.autoplay }}resetAutoplay();{{ end }} |
| 303 | + {{ if $autoplay }}resetAutoplay();{{ end }} |
302 | 304 | } |
303 | 305 | } |
304 | 306 | }); |
|
309 | 311 |
|
310 | 312 | carousel.addEventListener('touchstart', (e) => { |
311 | 313 | startX = e.touches[0].clientX; |
312 | | - startY = e.touches.clientY; |
| 314 | + startY = e.touches[0].clientY; |
313 | 315 | }); |
314 | 316 |
|
315 | 317 | carousel.addEventListener('touchend', (e) => { |
316 | 318 | if (!startX || !startY) return; |
317 | 319 |
|
318 | | - const endX = e.changedTouches.clientX; |
319 | | - const endY = e.changedTouches.clientY; |
| 320 | + const endX = e.changedTouches[0].clientX; |
| 321 | + const endY = e.changedTouches[0].clientY; |
320 | 322 |
|
321 | 323 | const diffX = startX - endX; |
322 | 324 | const diffY = startY - endY; |
|
328 | 330 | } else { |
329 | 331 | prevSlide(); |
330 | 332 | } |
331 | | - {{ if $block.design.autoplay }}resetAutoplay();{{ end }} |
| 333 | + {{ if $autoplay }}resetAutoplay();{{ end }} |
332 | 334 | } |
333 | 335 |
|
334 | 336 | startX = 0; |
|
0 commit comments