如何将PHP代码集成到HTML旋转木马代码中


How to integrate PHP code into HTML Carousel code?

有人能帮忙吗。我有点难以理解如何让它发挥作用。

该代码用于缩略图旋转木马。

这是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'] . '" />';
                                    }
        }
    ?> 

如果有人能帮助我或为我指明正确的方向,我将不胜感激!

试试这个。注意代码的起点和终点我没有复制你的所有区块:

<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$关键是您需要标记幻灯片的索引$active显示哪个幻灯片是活动的,所以你只需要设置一个(在我们的例子中,$key是0)

干杯。