每張幻燈片響應的項目​​

Question

我使用Bootstrap製作了一個徽標滑塊（基本上如此處所示http://jsfiddle.net/juddlyon/Q2TYv/10/）。

在每張幻燈片中有4個標誌。我想讓這種響應，在較小的屏幕上，它只顯示每個幻燈片2標誌。我不確定最好的方法是做什麼。

我可以通過媒體查詢將網格4的寬度加倍到50％，但是它仍然會在2x2網格中顯示4張幻燈片。

另一種方法是複製整個幻燈片並隱藏並顯示正確的幻燈片，但這看起來是一個相當低效的appreach。

所以我真的需要減少幻燈片的數量，因爲它是加載..但如何？

我使用WP和高級自定義字段來填充滑塊。下面簡化代碼：

PHP：

<?php 
    $firstslide = 0; 
    $slide = 0; 
    $repeater = get_field('clients', $clients); 
    $order = array(); 
    foreach($repeater as $i => $row) { 
     $order[ $i ] = $row['name']; 
    } 

    array_multisort($order, SORT_ASC, $repeater); 

    if($repeater): 
     foreach($repeater as $i => $row): 
      if ($firstslide == 0) { 
       $class = "item active"; 
      } else { 
       $class = "item"; 
      }; 

      if ($slide == 0) { 
       echo '<div class="' . $class . '">'; 
      }; 
     ?> 
      <div class="grid-4"> 
       <img src="<?php echo $row['logo']; ?>"> 
      </div> 
     <?php 
      if ($slide == 4) { 
       echo '</div>'; 
       $slide = 0; 
      } else { 
       $slide++; 
      } 
      $firstslide++; 
     endforeach; 
     wp_reset_postdata(); 
    endif; 
?> 

這將導致類似：

<div class="item active"> 
    <div class="grid-4"><img src="logo1.jpg"></div> 
    <div class="grid-4"><img src="logo2.jpg"></div> 
    <div class="grid-4"><img src="logo3.jpg"></div> 
    <div class="grid-4"><img src="logo4.jpg"></div> 
</div> 
<div class="item"> 
    <div class="grid-4"><img src="logo5.jpg"></div> 
    <div class="grid-4"><img src="logo6.jpg"></div> 
    <div class="grid-4"><img src="logo7.jpg"></div> 
    <div class="grid-4"><img src="logo8.jpg"></div> 
</div> 
<div class="item"> 
    <div class="grid-4"><img src="logo9.jpg"></div> 
    <div class="grid-4"><img src="logo10.jpg"></div> 
    <div class="grid-4"><img src="logo11.jpg"></div> 
    <div class="grid-4"><img src="logo12.jpg"></div> 
</div> 

網格非常簡單的CSS：

.grid-4 { 
    width: 25%; 
} 

Answer 1

更多的搜索後，看起來像Slick是一個解決方案，只會照顧這一點。

jsfiddle.net/BishopBarber/ufnjkjy4/1/