How do I stop my website from caching all the images at once?

Question

I have a page where I show off projects and photographs. There's gonna be a lot of projects and a lot of pictures. In my slider divs, I load in the pictures dynamically with PHP and add Tailwindcss classes to them. The problem is, when I open the page it starts caching absolutely all of the pictures at once, even the ones that are not needed or visible. The pictures are quite high-res at the moment, but when the time comes to add my clients 100+ projects in there, low-res pictures won't help that much when you have hundreds of images being cached all at once.

PHP that loads in the pictures:

$dir = ("projects/photography/" . scandir("projects/photography/")[$photographyIndex]);
$files = scandir($dir);
foreach($files as $file) {
    if($file !== "." && $file !== ".." && $file !== "info.php") {
        echo "<img src='$dir/$file' class='h-full' />";
    }
}

Slider DIV:

<div class="flex h-[36rem] overflow-x-scroll">
</div>