每张幻灯片响应的项目​​

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/