How to define 2 images for before/after slider?

Kirby 4 Question❓
1

I have uploaded several photos to the site for a before/after slider.
Several before/after pictures should always be displayed on the page, comparable to a photo gallery.
The image name is structured according to the following scheme:

20240226_before.jpg
20240226_after.jpg

10121068977_before.jpg
10121068977_after.jpg

44011014_before.jpg
44011014_after.jpg

How do I ensure that the associated image is automatically read out based on the addition in the image name? It is very likely that 2 arrays need to be created and combined, as I did on my static page. But I have never done this with Kirby before and need your help.

I had previously used this code on my static website:

<?php
$dir = 'images/beforeafter/*';
$images = array_combine(glob($dir.'_before.*'), glob($dir.'_after.*'));
foreach ($images as $img_a => $img_b) {
echo '<div class="js-img-compare">
<div style="display: none;">
<span class="images-compare-label">Before</span>
<img src="'.$img_a.'" alt="Before">
</div>
<div>
<span class="images-compare-label">After</span>
<img src="'.$img_b.'" alt="After">
</div>
</div>'; 
}
?>
2

I’m already a little closer to my goal. Before and after images are displayed in the slider.
However, the same image is now always displayed and not every other image pair from the folder.
If there are 20 different images in the folder, 20 sliders with the same image pair are displayed :woozy_face:

<?php
$images = $page->projectgallery()->toFiles();
foreach ($images as $image):
$img_a = $images->filterBy('filename', '*=', '_before')->first();
$img_b = $images->filterBy('filename', '*=', '_after')->first();
?>
<li class="grid-item">
<div class="js-img-compare">
<div style="display: none;">
<span class="images-compare-label">Before</span>
<img src="<?= $img_a->url() ?>" alt="Before">
</div>
<div>
<span class="images-compare-label">After</span>
<img src="<?= $img_b->url() ?>" alt="After">
</div>
</div>
</li>
<?php endforeach ?>

[EDIT] The fact that the same image is always output is due to ->first().
If I leave this out, the path to the image is defective.