{{-- Slidable banner gallery. $slides = [['src','thumb','alt'], ...]. Custom: CSS scroll-snap + a little JS. --}}
@php $n = count($slides); @endphp
<section class="slider" data-slider @if ($n > 1) data-autoplay="6000" @endif role="region" aria-roledescription="carousel" aria-label="{{ $label ?? 'Photos' }}">
    <ul class="slider__track" tabindex="0" aria-label="Slides, swipe or use the arrow keys" aria-live="off">
        @foreach ($slides as $i => $s)
            <li class="slider__slide" role="group" aria-roledescription="slide" aria-label="{{ $i + 1 }} of {{ $n }}">
                <img src="{{ $s['src'] }}" @if ($s['thumb'] && $s['thumb'] !== $s['src']) srcset="{{ $s['thumb'] }} 640w, {{ $s['src'] }} 1600w" sizes="(min-width: 960px) 760px, 100vw" @endif
                     alt="{{ $s['alt'] }}" width="1280" height="720" decoding="async"
                     @if ($i === 0) fetchpriority="high" @else loading="lazy" @endif>
            </li>
        @endforeach
    </ul>

    @if (! empty($ribbon))<span class="slider__ribbon">{{ $ribbon }}</span>@endif

    @if ($n > 1)
        <button class="slider__nav slider__nav--prev" type="button" data-prev aria-label="Previous slide"><svg class="i i--lg" aria-hidden="true"><use href="#i-arrow"/></svg></button>
        <button class="slider__nav slider__nav--next" type="button" data-next aria-label="Next slide"><svg class="i i--lg" aria-hidden="true"><use href="#i-arrow"/></svg></button>
        <div class="slider__dots" role="group" aria-label="Choose a slide">
            @foreach ($slides as $i => $s)
                <button type="button" data-dot="{{ $i }}" aria-label="Go to slide {{ $i + 1 }}" @if ($i === 0) aria-current="true" @endif></button>
            @endforeach
        </div>
    @endif
</section>