@php
    $slides = [
        ['src' => '/images/Kiosk_test_01.jpg', 'alt' => 'Slide 1'],
        ['src' => '/images/Kiosk_test_01.jpg', 'alt' => 'Slide 2'],
        ['src' => '/images/Kiosk_test_01.jpg', 'alt' => 'Slide 3'],
    ];
@endphp

<section class="slider" id="home-slider">
    <div class="slider__track">
        @foreach ($slides as $index => $slide)
            <div class="slider__slide {{ $index === 0 ? 'slider__slide--active' : '' }}">
                <img src="{{ $slide['src'] }}" alt="{{ $slide['alt'] }}" class="slider__image" />
            </div>
        @endforeach
    </div>
    <button class="slider__arrow slider__arrow--prev" aria-label="Previous slide">&#8592;</button>
    <button class="slider__arrow slider__arrow--next" aria-label="Next slide">&#8594;</button>
    <div class="slider__dots">
        @foreach ($slides as $index => $slide)
            <button class="slider__dot {{ $index === 0 ? 'slider__dot--active' : '' }}" aria-label="Go to {{ $slide['alt'] }}">{{ $index + 1 }}</button>
        @endforeach
    </div>
</section>