Question

我正在努力实现如下图所示。我想创建一个图像轮播滑块，其中我有4个项目，每个项目有4个幻灯片。这个图像就像一个单选按钮选择我从数据库中获取列表，所以我想通过突出显示选中的幻灯片来突出显示选择了哪个单选按钮。因此，无论何时加载轮播，它都应突出显示被选为无线电输入的幻灯片

Simple Carousel

以下是它的链接：https://bootsnipp.com/snippets/featured/simple-carousel

这是我的代码：

<div class="carousel-inner">

<?php
  $result = '';
  foreach ($template_data as $key => $value) {

    if ($key == 0) {
      $result .= '<div class="item active">';
    }
    elseif ($key !=0 && ($key % 4 == 0)) { 
      //to avoid first empty "active"
      $result .= "</div>";
      $result .= '<div class="item">';
    }

    $result .= '<div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="#" title="#"></a></div>';
  }

  $result .= '</div>';
  echo $result;
?> 

</div>

Answer 1

你的基本前提对我来说很好，虽然突出问题的example on jsFiddle之类的东西要好得多。对于未来的问题，请考虑一下。

与此同时，我可能会考虑重新组织您的代码，以便在编写开始和结束元素标记时永远不会产生歧义。如果您打开标签，请将其关闭。总是：

<?php
    $result = '';
    foreach ($template_data as $key => $value) {

        $cssClass = 'item';
        if ( /* Your test to determine 'active'; you currently have $key == 0 */ ) {
            $cssClass .= ' active';
        }

        $result .= "<div class='$cssClass'><div class='col-md-3'><a href='#'><img src='http://placehold.it/250x250' alt='#' title='#'></a></div></div>";
    }

    echo $result;
?>

唯一必要的if-check应该是确定该项目是否有效。如果是，请相应地进行修改。否则，每个项的循环相同。以后更容易编写，阅读和推理。

在旋转木马滑块php中突出显示活动子项内的活动子项

1 个答案: