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

Question

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

1

Я пытаюсь пропустить некоторые изображения, которые я назвал в папке, используя 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>

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

David Escandon 10 дек. 2015, в 16:43

Источник

Теги:

php

for-loop

operators

modulus

1 ответ

Ещё вопросы

Nikolay Yenbakhtov · Accepted Answer · 2015-12-10T15-10-00.000Z

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

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