<div x-data="{
    current: 0,
    images: ['https://picsum.photos/800/400?random=1', 'https://picsum.photos/800/400?random=2', 'https://picsum.photos/800/400?random=3'],
    next() { this.current = (this.current + 1) % this.images.length; },
    prev() { this.current = this.current === 0 ? this.images.length - 1 : this.current - 1; }
}" x-init="setInterval(() => next(), 5000)">
    <div class="relative overflow-hidden rounded-lg">
        <img :src="images[current]" class="w-full h-64 object-cover">
        <button @click="prev()" class="absolute left-2 top-1/2 -translate-y-1/2 bg-white/80 p-2 rounded-full">←</button>
        <button @click="next()" class="absolute right-2 top-1/2 -translate-y-1/2 bg-white/80 p-2 rounded-full">→</button>
    </div>
</div>