copy elements in foreach if there are no more than 3

I use a regular slick slider on the page

$(document).ready(function() {
    $('.slider-images').slick({
        autoplay: true,
        slidesToShow: 3,
        arrows: false
    });
});

.slider-images {width:100%;margin:0px auto;}
.slider-images .slider-image {position:relative;}
.slider-images .slick-slide {margin:10px;}
.slider-images .slick-slide img {width:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet">

<div class="slider-images">
        <div class="slider-image">
            <img src="https://i.imgur.com/CUmIpxR.jpg">
        </div>
        <div class="slider-image">
            <img src="https://i.imgur.com/g7aX7wR.jpg">
        </div>
        <div class="slider-image">
            <img src="https://i.imgur.com/cPToo7F.jpg">
        </div>
        <div class="slider-image">
            <img src="https://i.imgur.com/qVbD6iK.png">
        </div>
</div>

<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>

I use php to display images in this slider

<div class="slider-images">
    <?php foreach ($images as $image) { ?>
        <div class="slider-image">
            <img src="<?= $image->url?>">
        </div>
    <?php } ?>
</div>

The following question follows, in my slider settings there are 3 pictures for slides, that is, for it to work, I need to upload 4 pictures

But I may have such a situation that I will upload 1 or 2 pictures

How can I make it so that when I upload 1 image on the PHP side, then 3 more images will be created during the output. The same thing if I upload 2 pictures, it should copy 2 more

Accordingly, if I myself upload 4 pictures or more, then nothing needs to be done

source https://stackoverflow.com/questions/76552004/copy-elements-in-foreach-if-there-are-no-more-than-3