每张幻灯片上的项目响应

Question

我已经用Bootstrap制作了一个徽标滑块(基本上就像这里看到的http://jsfiddle.net/juddlyon/Q2TYv/10/)。

每张幻灯片中有4个徽标。我想让这个响应，在较小的屏幕上，它只显示2个标志每张幻灯片。我不确定做这件事最好的方法是什么。

我可以使用媒体查询将网格4的宽度加倍到50%，但在2x2的网格中，每张幻灯片仍然会显示4个。

另一种方法是复制整个幻灯片，隐藏并显示正确的幻灯片，但这似乎是一个相当低效的方法。

所以我真的需要在加载时减少每张幻灯片的徽标数量。但是怎么做呢？

我使用可湿性粉剂和高级自定义字段来填充滑块。简化代码如下：

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/