Question

我使用Bootstrap创建了一个徽标滑块（基本上如此处http://jsfiddle.net/juddlyon/Q2TYv/10/所示）。

每张幻灯片中有4个徽标。我想让这个响应，在较小的屏幕上，每张幻灯片只显示2个徽标。我不知道最好的办法是什么。

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

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

所以我真的需要减少每个幻灯片加载时的徽标数量..但是如何？

我使用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 /

每张幻灯片响应的项目

1 个答案: