Project images linking to children subpages

Hello,

I’m creating a slider for my site using Swiper.js. So far I have figured out how to add invidivual images from the site folder into each slide that URL to a specific template.

However, I would like each slide to have the image from the ‘projects’ child - then also link to the specific ‘project’.

Here is what I have so far:

    <div class="swiper-slide">
    <a href="<?= $pages->find('home')->url() ?>">
            <?php if ($image = $site->image('1_still.jpg')): ?>
                <img src="<?= $image->url() ?>" alt="">
            <?php endif ?></div>
        </a>

    <div class="swiper-slide">
    <a href="<?= $pages->find('home')->url() ?>">
            <?php if ($image = $site->image('2_still.jpg')): ?>
                <img src="<?= $image->url() ?>" alt="">
            <?php endif ?></div>
        </a>

I’m looking for something like this:

        <div class="swiper-slide">
            <?php foreach ($page->children() as $film): ?>
                  <a href="<?= $film->url() ?>">
                      <?= $film->image() ?>
                      <?= $film->title() ?>
                  </a>
           <?php endforeach ?>
        </div>

The content folder structure is:

Content
1_film
film-a
1_film_a_still.jpg
film-b
1_film_b_still.jpg
film-c
1_film_c_still.jpg
2_Contact
3_About

Thanks!

So film is the parent page, an film-a etc are the children? And you want to get the first image of each of these film pages as they appear in the file system?

<?php

if ( $filmPage = page('film') ) :
  $films = $filmPage->children(); ?>
  <div class="swiper-slide">
    <?php foreach ( $films as $film) : ?>

                  <a href="<?= $film->url() ?>">
                      <?= $film->image() ?>
                      <?= $film->title() ?>
                  </a>
           
    <?php endforeach; ?>
  </div>
<?php endif; ?>