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

Banner-Slider auf der Startseite

Browse Source 
Komponente banner-slider liest data/banners.json; banner.js übernimmt
Autoplay/Pause/Steuerung (progressive enhancement). Slider sitzt zwischen
Hero und Instagram-Feed. Bilder vorerst als Platzhalter-SVGs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
This commit is contained in:
Felix Schneider
2026-06-19 08:12:43 +02:00
parent 10b4ede8f1
commit a933b76c4f
8 changed files with 243 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/components/banner-slider.php Normal file
View File

@@ -0,0 +1,68 @@
<?php
declare(strict_types=1);
/**
* Werbe-/Sponsoren-Banner-Slider. Daten: data/banners.json (Single Source of Truth).
* Layout je Slide: 2/3 Titel + Text + CTA, 1/3 Firmenlogo.
* Auto-Rotation + Fortschritts-Indikatoren übernimmt assets/js/banner.js
* (pausiert bei Hover/Fokus, respektiert prefers-reduced-motion).
* Ohne JS: nur der erste Banner ist sichtbar (Graceful Degradation).
*/
$bannerData = json_load('banners');
$banners = $bannerData['banners'] ?? [];
if ($banners === []) {
return;
}
$heading = $bannerData['heading'] ?? null;
$subline = $bannerData['subline'] ?? null;
$total = count($banners);
?>
<section class="section ad-banner" id="anzeigen" aria-roledescription="Karussell" aria-label="Anzeigen unserer Sponsoren und Partner" data-banner>
<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" aria-live="off">
<?php foreach ($banners as $i => $banner): ?>
<?php $bg = $banner['background'] ?? null; ?>
<li class="ad-banner__slide<?= $bg ? ' ad-banner__slide--bg' : '' ?>"<?= $bg ? ' style="--banner-bg: url(' . e(asset($bg)) . ')"' : '' ?> data-banner-slide role="group" aria-roledescription="Folie" aria-label="<?= ($i + 1) ?> von <?= $total ?>"<?= $i === 0 ? '' : ' hidden' ?>>
<div class="ad-banner__content">
<span class="ad-banner__tag">Anzeige</span>
<p class="ad-banner__title"><?= e($banner['title']) ?></p>
<p class="ad-banner__text"><?= e($banner['text']) ?></p>
<?php if (!empty($banner['cta']['url']) && !empty($banner['cta']['label'])): ?>
<a class="btn ad-banner__cta" href="<?= e($banner['cta']['url']) ?>" target="_blank" rel="noopener sponsored"><?= e($banner['cta']['label']) ?><span class="visually-hidden"> (öffnet in neuem Tab)</span></a>
<?php endif; ?>
</div>
<div class="ad-banner__logo">
<img src="<?= e(asset($banner['logo'])) ?>" alt="<?= e($banner['company'] ?? $banner['title']) ?>" loading="lazy" decoding="async">
</div>
</li>
<?php endforeach; ?>
</ul>
<?php if ($total > 1): ?>
<?php /* Ohne JS verborgen (Steuerung wäre funktionslos); banner.js blendet sie ein. */ ?>
<div class="ad-banner__controls" data-banner-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-banner-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-banner-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-banner-dot aria-controls="ad-banner-track" aria-label="Anzeige <?= ($i + 1) ?> von <?= $total ?>: <?= e($banner['company'] ?? $banner['title']) ?>">
<span class="ad-banner__progress" aria-hidden="true"></span>
</button>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
</section>

3
app/pages/home.php
View File

@@ -13,10 +13,11 @@ $meta = [
'title' => 'Fußball & Turnen in Kulmbach – TSV 08 Kulmbach',
'title_absolute' => true,
'description' => 'Dein Sportverein für Fußball und Turnen in Kulmbach: Jugend-, Herren- und Damenfußball, Turnen und Trampolin – seit 1908 im Katzbachtal. Jetzt Mitglied werden!',
'scripts' => ['form.js'],
'scripts' => ['form.js', 'banner.js'],
];
component('hero', ['hero' => $home['hero']]);
component('banner-slider');
component('instagram-feed');
foreach ($home['sections'] as $section) {