Slider

@props([
    'id' => 'slider-'.str()->random(),
])

<div {{ $attributes->merge(['id' => $id, 'class' => 'swiper']) }}>
    <div class="swiper-wrapper">
        {{ $slot }}
    </div>
    <div class="button-prev absolute top-1/2 left-0 z-50 transform -translate-y-1/2 cursor-pointer text-gray-200 text-2xl p-2">
        {{ icon('chevron-left') }}
    </div>
    <div class="button-next absolute top-1/2 right-0 z-50 transform -translate-y-1/2 cursor-pointer text-gray-200 text-2xl p-2">
        {{ icon('chevron-right') }}
    </div>
</div>

@once
    @push('styles')
        <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
    @endpush

    @push('scripts')
        <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
    @endpush
@endonce

@push('scripts')
    <script>
        new Swiper('#{{ $id }}', {
            navigation: {
                nextEl: '.button-next',
                prevEl: '.button-prev',
            },
        })
    </script>
@endpush

<x-slider>
    @foreach ($items as $item)
        <div class="swiper-slide">
            ...content of slide...
        </div>
    @endforeach
</x-slider>