1
私はブートストラップ（基本的にここに見られるようにhttp://jsfiddle.net/juddlyon/Q2TYv/10/）を使ってロゴスライダーを作っています。スライド1枚あたりの応答性
各スライドには4つのロゴがあります。私はこれを反応的なものにしたいと思っています。小さな画面ではスライド1つにつき2つのロゴしか表示されません。私はこれを行う最良の方法が何であるか分かりません。
メディアクエリーでグリッド4の幅を50％に倍増できますが、それでも2x2のグリッドにスライドごとに4つ表示されます。
もう1つの方法は、スライド全体を複製して正しいものを隠して表示することですが、これはむしろ非効率なアプリケーションのようです。
本当にスライド1枚あたりのロゴ数を減らす必要があります。
私は、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%;
}