Используйте модуль для циклов на более глубоких уровнях с определенными структурами

Я пытаюсь перебрать некоторые изображения, которые я назвал в папке с помощью php. Проблема в том, что мне нужно поместить изображения в определенную разметку, потому что я буду использовать их динамически в карусели.

Обычно я просто перебираю пункты:

<div class="slider">
<?php
for ($x = 0; $x <= 10; $x++) {
if ($x == 0) {
echo '<div class="slide active"><img src="img_'.$x.'"></div>';
} else {
echo '<div class="slide"><img src="img_'.$x.'"></div>';
}
}
?>
</div>

Я попытался добавить четыре изображения к каждому слайду, используя модуль для подсчета и добавления разметки между ними:

<div class="slider">
<div class="slide active">
<?php
for ($x = 0; $x <= 10; $x++) {
if ($x % 4 == 0) {
echo '<img src="img_'.$x.'"></div><div class="slide">';
} else {
echo '<img src="img_'.$x.'">';
}
}
?>
</div>
</div>

Я пытаюсь заставить слайдер работать с определенной структурой, где изображения вложены в разные элементы div, например:

<div class="slider">
<div class="slide active">
<!-- -->
<div class="slider-container">
<div class="flexChild rowParent">
<div class="flexChild flex-element"><img src="img_0.jpg"></div>
<div class="flexChild columnParent">
<div class="flexChild flex-element"><img src="img_1.jpg"></div>
<div class="flexChild rowParent">
<div class="flexChild flex-element"><img src="img_2.jpg"></div>
<div class="flexChild flex-element"><img src="img_3.jpg"></div>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<div class="slider">
<div class="slide">
<!-- -->
<div class="slider-container">
<div class="flexChild rowParent">
<div class="flexChild flex-element"><img src="img_4.jpg"></div>
<div class="flexChild columnParent">
<div class="flexChild flex-element"><img src="img_5.jpg"></div>
<div class="flexChild rowParent">
<div class="flexChild flex-element"><img src="img_6.jpg"></div>
<div class="flexChild flex-element"><img src="img_7.jpg"></div>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<div class="slider">
<div class="slide">
<!-- -->
<div class="slider-container">
<div class="flexChild rowParent">
<div class="flexChild flex-element"><img src="img_8.jpg"></div>
<div class="flexChild columnParent">
<div class="flexChild flex-element"><img src="img_9.jpg"></div>
<div class="flexChild rowParent">
<div class="flexChild flex-element"><img src="img_10.jpg"></div>
</div>
</div>
</div>
</div>
<!-- -->
</div>
</div>

Я пытался пройтись по этим элементам с этой структурой, но мне это не удалось. Если у вас есть предложения о том, как это можно сделать, я был бы очень признателен! Я искал повсюду для этого, но я не мог найти никакого результата. Возможно ли достичь или я должен просто бросить это?