カルーセルスライダーのアイテムアクティブでアクティブなサブアイテムをハイライト表示

Question

私は以下の画像のように達成しようとしています。 私は4つのスライドがそれぞれ4つのアイテムを持っている画像カルーセルスライダーを作成したいと思います。 この画像はラジオボタンの選択と同じように動作しますデータベースからリストを取得していますので、選択したスライドがハイライトされて選択されているラジオボタンが強調表示されます。ここで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

だから、カルーセル負荷が、それはラジオの入力として選択されたスライドを強調表示する必要があるたび

ここ

Simple Carousel

はそれのリンクですあなたの基本的な前提は私には良く見えますが、問題を強調する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だけが必要です。その場合は、それに応じて変更してください。それ以外の場合、ループはのすべての項目に対して同じとなります。後で書いたり、読んだり、推論したりするのがずっと簡単です。