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