fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Banner-Slider: Vor-/Zurück-Steuerung

Browse Source 
Prev/Next-Navigationsbuttons für den Banner-Slider (carousel.js, generisch über
[data-carousel-prev/next]), zugehörige ad-banner-Steuerungs-Styles und Chevron-
Icons. Ohne JS bleiben die Controls ausgeblendet (progressive enhancement).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
This commit is contained in:
Felix Schneider
2026-06-20 20:49:12 +02:00
parent b40f36aee6
commit a3d64e7d91
6 changed files with 86 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/components/banner-slider.php
View File

@@ -26,14 +26,7 @@ $total = count($banners);
?>
<section class="section ad-banner" id="anzeigen" aria-roledescription="Karussell" aria-label="Anzeigen unserer Sponsoren und Partner" data-carousel>
<div class="container">
<?php if ($heading !== null): ?>
<h2><?= e($heading) ?></h2>
<?php else: ?>
<h2 class="visually-hidden">Anzeigen unserer Sponsoren &amp; Partner</h2>
<?php endif; ?>
<?php if ($subline !== null): ?>
<p class="text-muted ad-banner__subline"><?= e($subline) ?></p>
<?php endif; ?>
<ul class="ad-banner__track" id="ad-banner-track" data-carousel-track aria-live="off">
<?php foreach ($banners as $i => $banner): ?>
<?php
@@ -98,23 +91,34 @@ $total = count($banners);
</li>
<?php endforeach; ?>
</ul>
<?php if ($total > 1): ?>
<?php /* Ohne JS verborgen (Steuerung wäre funktionslos); carousel.js blendet sie ein. */ ?>
<div class="ad-banner__controls" data-carousel-controls hidden>
<?php /* Explizite Pause/Play-Taste — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
<button class="ad-banner__toggle" type="button" data-carousel-toggle aria-pressed="false" aria-controls="ad-banner-track" hidden>
<?= icon('pause-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--pause') ?>
<?= icon('play-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--play') ?>
<span class="visually-hidden" data-carousel-toggle-label>Automatischen Wechsel pausieren</span>
</button>
<div class="ad-banner__indicators" role="group" aria-label="Anzeige wählen">
<?php foreach ($banners as $i => $banner): ?>
<button class="ad-banner__dot" type="button" data-carousel-dot aria-controls="ad-banner-track" aria-label="Anzeige <?= ($i + 1) ?> von <?= $total ?>: <?= e($banner['company'] ?? $banner['title']) ?>">
<span class="ad-banner__progress" data-carousel-progress aria-hidden="true"></span>
</button>
<?php endforeach; ?>
</div>
</div>
<div class="ad-banner__meta">
<?php if ($heading !== null): ?>
<p class="ad-banner__meta-label"><?= e($heading) ?></p>
<?php endif; ?>
<?php if ($total > 1): ?>
<?php /* Ohne JS verborgen (Steuerung wäre funktionslos); carousel.js blendet sie ein. */ ?>
<div class="ad-banner__controls" data-carousel-controls hidden>
<button class="ad-banner__nav-btn" type="button" data-carousel-prev aria-label="Vorherige Anzeige">
<?= icon('chevron-left') ?>
</button>
<div class="ad-banner__indicators" role="group" aria-label="Anzeige wählen">
<?php foreach ($banners as $i => $banner): ?>
<button class="ad-banner__dot" type="button" data-carousel-dot aria-controls="ad-banner-track" aria-label="Anzeige <?= ($i + 1) ?> von <?= $total ?>: <?= e($banner['company'] ?? $banner['title']) ?>">
<span class="ad-banner__progress" data-carousel-progress aria-hidden="true"></span>
</button>
<?php endforeach; ?>
</div>
<button class="ad-banner__nav-btn" type="button" data-carousel-next aria-label="Nächste Anzeige">
<?= icon('chevron-right') ?>
</button>
<?php /* Pause/Play — WCAG 2.2.2. Nur bei aktiver Auto-Rotation sichtbar. */ ?>
<button class="ad-banner__toggle" type="button" data-carousel-toggle aria-pressed="false" aria-controls="ad-banner-track" hidden>
<?= icon('pause-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--pause') ?>
<?= icon('play-fill', 'ad-banner__toggle-icon ad-banner__toggle-icon--play') ?>
<span class="visually-hidden" data-carousel-toggle-label>Automatischen Wechsel pausieren</span>
</button>
</div>
<?php endif; ?>
</div>
</div>
</section>