Как интегрировать PHP-код в HTML-код карусели?

Question

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

Код для миниатюрной карусели.

Вот HTML

<div class="carousel slide" id="myCarousel"> 
<!-- Carousel items --> 
<div class="carousel-inner"> 

<div class="active item" data-slide-number="0"> 
<img src="http://placehold.it/770x300&text=one"> 
</div> 

    <div class="item" data-slide-number="1"> 
    <img src="http://placehold.it/770x300&text=two"> 
    </div> 

    <div class="item" data-slide-number="2"> 
    <img src="http://placehold.it/770x300&text=three"> 
    </div> 

    <div class="item" data-slide-number="3"> 
    <img src="http://placehold.it/770x300&text=four"> 
    </div> 

    <div class="item" data-slide-number="4"> 
    <img src="http://placehold.it/770x300&text=five"> 
    </div> 

    <div class="item" data-slide-number="5"> 
    <img src="http://placehold.it/770x300&text=six"> 
    </div> 

    </div> 
    <!-- Carousel nav --> 

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span>          
</a> 

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span>          
</a>   

</div> 

<!--thumbnails--> 
<div class="row hidden-xs" id="slider-thumbs"> 
<ul class="hide-bullets"> 
<li class="col-sm-2"> 
<a class="thumbnail" id="carousel-selector-0"> 
<img src="http://placehold.it/170x100&text=one"> 
</a> 
</li> 

<li class="col-sm-2"> 
<a class="thumbnail" id="carousel-selector-1"> 
<img src="http://placehold.it/170x100&text=two"> 
</a> 
</li> 

<li class="col-sm-2"> 
<a class="thumbnail" id="carousel-selector-2"> 
<img src="http://placehold.it/170x100&text=three"> 
</a> 
</li> 

<li class="col-sm-2"> 
<a class="thumbnail" id="carousel-selector-3"> 
<img src="http://placehold.it/170x100&text=four"> 
</a> 
</li> 

<li class="col-sm-2"> 
    <a class="thumbnail" id="carousel-selector-4"> 
    <img src="http://placehold.it/170x100&text=five"> 
    </a> 
</li> 

<li class="col-sm-2"> 
    <a class="thumbnail" id="carousel-selector-5"> 
    <img src="http://placehold.it/170x100&text=six"> 
    </a> 
</li> 

</ul>     
</div> 

Приведенный выше код работает отлично, однако я пытаюсь интегрировать ниже PHP код, так что ползун имеет динамические изображения с иконками.

Вот PHP код для отображения изображений:

 <?php 
     if ($images = get_field('images', $design_id)) { 
     foreach ($images as $image) { 
      echo '<img src="' . $image['image']['sizes']['large'] . '" />'; 
            } 
     } 
    ?> 

Если кто-то может помочь или указать мне в правильном направлении, он будет оценен по достоинству!

Answer 1

Попробуйте это. Обратите внимание, где код начинается и заканчивается. Я не копировал весь ваш блок:

<div class="carousel-inner"> 
    <?php 
     if ($images = get_field('images', $design_id)) { 
     foreach ($images as $key => $image) { 
      $active = $key == 0 ? 'active' : ''; 
      echo '<div class="<?php echo $active;?> item" data-slide-number="<?php echo $key; ?>">'; 
      echo '<img src="' . $image['image']['sizes']['large'] . '" />'; 
      echo '</div>';      } 
     } 
    ?> 
</div> 

Объяснение. Показывать изображения не только для печати img src = ..., поэтому вы должны увидеть, какой html-блок поставить в цикле foreach, чтобы он отображался как html, который вы опубликовали. $ key - это индекс, который нужно отметить слайдами. $ active показывает, какой слайд активен, поэтому вам нужно установить только единицы (в нашем случае, когда $ key равен 0)

Cheers.