Carousel

[NimaKhadivar]

Hello
i made carousel .

use ->

    @php
        $photos = [
            [
                'src' => 'https://picsum.photos/1200/800?random=637',
                'alt' => 'Random image 1',
            ],
            [
                   'src' => 'https://picsum.photos/1200/800?random=636',
                'alt' => 'Random image 2',
            ],
            [
                   'src' => 'https://picsum.photos/1200/800?random=335',
                'alt' => 'Random image 3',
            ],
        ];
    @endphp

    <flux:carousel
        :items="$photos"
        variant="outline"
        autoplay="true"
    />

---

code ->

@props([
    'items' => [],
    'autoplay' => false,
    'interval' => 6000,
    'duration' => 700,
    'indicators' => true ,
])

@php
    $classes = Flux::classes()
        ->add('shrink-0 relative h-56 w-full rounded-xl p-0 overflow-hidden md:h-96')
        ->add('bg-white border border-zinc-200 text-zinc-900 dark:bg-zinc-800 dark:border-zinc-800 dark:text-zinc-50');
    $total = max(count($items), 1);
@endphp

<div
    {{ $attributes->class($classes) }}
    x-data="{
        index: 0,
        total: {{ $total }},
        duration: {{ $duration }},
        autoplay: {{ $autoplay ? 'true' : 'false' }},
        interval: {{ $interval }},
        intervalId: null,
        next() {
            this.index = (this.index + 1) % this.total
        },
        prev() {
            this.index = (this.index - 1 + this.total) % this.total
        },
        go(i) {
            this.index = i
        },
        start() {
            if (!this.autoplay || this.intervalId) return
            this.intervalId = setInterval(() => {
                this.next()
            }, this.interval)
        },
        stop() {
            if (this.intervalId) {
                clearInterval(this.intervalId)
                this.intervalId = null
            }
        }
    }"
    x-init="start()"
    @mouseenter="stop()"
    @mouseleave="start()"
>
    <div class="h-full w-full overflow-hidden">
        <div
            class="flex h-full w-full"
            :style="`transform: translateX(-${index * 100}%); transition: transform ${duration}ms ease-out;`"
        >
            @forelse ($items as $image)
                <div class="relative min-w-full h-56 md:h-96">
                    <img
                        src="{{ $image['src'] ?? '' }}"
                        alt="{{ $image['alt'] ?? '' }}"
                        class="w-full h-full object-cover"
                    >
                </div>
            @empty
                <div class="absolute inset-0 flex items-center justify-center">
                    <h1 class="text-lg md:text-xl font-semibold text-zinc-600 dark:text-zinc-300">
                        No images available
                    </h1>
                </div>
            @endforelse
        </div>
    </div>

    @if ($total > 1)
        <div class="absolute left-4 md:left-5 top-1/2 -translate-y-1/2">
            <flux:button
                size="xs"
                variant="outline"
                icon="chevron-left"
                @click="prev()"
            />
        </div>

        <div class="absolute right-4 md:right-5 top-1/2 -translate-y-1/2">
            <flux:button
                size="xs"
                variant="outline"
                icon="chevron-right"
                @click="next()"
            />
        </div>

        @if($indicators)
            <div class="absolute flex bottom-4 md:bottom-5 left-1/2 -translate-x-1/2 flex-wrap gap-3">
                @for ($i = 0; $i < $total; $i++)
                    <button
                        type="button"
                        @click="go({{ $i }})"
                        :class="index === {{ $i }}
                        ? 'w-3 h-3 rounded-full bg-zinc-800 dark:bg-zinc-100 scale-110 shadow-sm transition-all'
                        : 'w-2.5 h-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700/80 opacity-80 hover:opacity-100 transition-all'"
                    ></button>
                @endfor
            </div>
        @endif

    @endif
</div>