如何將PHP代碼整合到HTML Carousel代碼中？

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 = ...，所以你必須看到在foreach循環中放置了什麼html塊，以便將它顯示爲你發佈的html。 $ key是您需要標記幻燈片的索引。 $ active顯示哪個幻燈片處於活動狀態，因此您只需將其設置爲1（在我們的情況下，$ key爲0時）

乾杯。