如何将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时）

干杯。