Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building Image Gallery with Livewire v4

Create an interactive image gallery.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Build an image gallery with lightbox.

Component

php
@php
new class extends Livewire\Component {
    public array $images = [];
    public ?int $activeIndex = null;
    
    public function open(int $index): void
    {
        $this->activeIndex = $index;
    }
    
    public function close(): void
    {
        $this->activeIndex = null;
    }
    
    public function next(): void
    {
        $this->activeIndex = ($this->activeIndex + 1) % count($this->images);
    }
    
    public function prev(): void
    {
        $this->activeIndex = ($this->activeIndex - 1 + count($this->images)) % count($this->images);
    }
}
@endphp
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read