Utiliser le module dans des boucles dans des niveaux plus profonds avec des structures spécifiques

Question

J'essaye de faire défiler certaines images que j'ai nommées dans un dossier en utilisant php. Le problème ici est que je dois placer les images dans un balisage spécifique parce que je les utiliserai dynamiquement dans un carrousel.

Normalement, je viens de boucle à travers les éléments:

<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> 

J'ai essayé d'ajouter quatre images à chaque diapositive, en utilisant le module de compter et ajouter des balises entre eux:

<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> 

Je suis en train pour faire fonctionner le curseur avec une structure spécifique où les images sont imbriquées dans différents divs, comme ceci:

<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> 

J'ai essayé de faire défiler ces éléments avec cette structure, mais je n'ai pas réussi. Si vous avez des suggestions sur la façon dont cela peut être fait, je l'apprécierais vraiment! J'ai cherché partout, mais je n'ai trouvé aucun résultat. Est-il possible de le réaliser, ou devrais-je le laisser tomber?

Answer 1

Pour obtenir la structure que vous voulez, il faut utiliser deux boucles:

<?php 
    $result = ''; 
    $x = 0; 
    $items = 10; 
    while($x <= $items){ 
     if($x == 0){ 
      $result .= '<div class="slider"><div class="slide active"> <!-- --> <div class="slider-container"><div class="flexChild rowParent">'; 
     }else{ 
      $result .= '<div class="slider"><div class="slide"> <!-- --> <div class="slider-container"><div class="flexChild rowParent">'; 
     }   

     $result .= '<div class="flexChild flex-element"><img src="img_'.$x.'.jpg"></div>'; 
     $result .= '<div class="flexChild columnParent">'; 

     $result .= '<div class="flexChild flex-element"><img src="img_'.($x+1).'.jpg"></div>'; 
     $result .= '<div class="flexChild rowParent">'; 

     for($y=2; $y<=3; $y++){ 
      if(($x + $y) <= $items){ 
       $result .= '<div class="flexChild flex-element"><img src="img_'.($x+$y).'.jpg"></div>'; 
      } 
     } 

     $result .= '</div></div></div></div><!-- --></div></div>'; 
     $x += 4; 
    } 

    echo $result; 
?>