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时）

干杯。

如何将PHP代码集成到HTML Carousel代码中？

1 个答案: