Копировать элементы в foreach, если их не более 3

Я использую обычный гладкий слайдер на странице

$(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/[email protected]/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>

Я использую php для отображения изображений в этом слайдере

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

Отсюда вытекает следующий вопрос, у меня в настройках слайдера есть 3 картинки для слайдов, то есть для его работы мне нужно загрузить 4 картинки

Но у меня может быть такая ситуация, что я загружу 1 или 2 картинки

Как мне сделать так, чтобы когда я загружаю 1 изображение на стороне PHP, то при выводе создавались еще 3 изображения. То же самое, если я загружаю 2 картинки, она должна скопировать еще 2

Соответственно, если я сам загружаю 4 картинки и более, то ничего делать не надо

Получается, что мне нужно посчитать количество элементов, и если их меньше 4 копировать в цикле for

Если образ всего один, то вроде не так уж и сложно, а если у меня 2 образа, скажем? Мне тогда нужно сделать 2 копии первого образа, и не все понятно как это сделать

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

И можно ли сделать клонирование в самом javascript?

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

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с графикой и аудио, что позволяет создавать мультимедийные веб-приложения.