fs
a933b76c4f
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
69 lines
4.0 KiB
PHP
69 lines
4.0 KiB
PHP
<?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 & 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>
|