new
Livewire Volt extension for VSCode. Voltage →
maryUI

Image Gallery

This component is a wrapper around PhotoSwipe to easily display a nice image gallery. It supports swipe gestures on mobile devices.

This a good option to display images from Image Library component.

Setup 

<head>
    ...
    {{-- PhotoSwipe --}}
    <script src="https://cdn.jsdelivr.net/npm/photoswipe@5.4.3/dist/umd/photoswipe.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/photoswipe@5.4.3/dist/umd/photoswipe-lightbox.umd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/photoswipe@5.4.3/dist/photoswipe.min.css" rel="stylesheet">
</head>

Basic

By default, the height of previews will be equal to the original images heights. Use some CSS to set max height. 

@php
    $images = [
        '/photos/photo-1559703248-dcaaec9fab78.jpg',
        '/photos/photo-1572635148818-ef6fd45eb394.jpg',
        '/photos/photo-1565098772267-60af42b81ef2.jpg',
        '/photos/photo-1494253109108-2e30c049369b.jpg',
        '/photos/photo-1550258987-190a2d41a8ba.jpg',
    ]
@endphp
 
<x-image-gallery :images="$images" class="h-40 rounded-box" />
maryUI
Sponsor