Ich habe einen Logo-Slider mit Bootstrap gemacht (im Grunde wie hier gesehen http://jsfiddle.net/juddlyon/Q2TYv/10/).Elemente pro Folie reagieren
Innerhalb jeder Folie befinden sich 4 Logos. Ich möchte das ansprechen, wo auf kleineren Bildschirmen nur 2 Logos pro Folie angezeigt werden. Ich bin nicht sicher, was der beste Weg ist, dies zu tun.
Ich kann die Raster-4-Breite mit Medienabfragen auf 50% verdoppeln, aber dann werden immer noch 4 pro Folie in einem 2x2-Raster angezeigt.
Eine andere Möglichkeit besteht darin, die gesamte Folie zu duplizieren und die richtige Folie zu verstecken und anzuzeigen, aber dies scheint ein ziemlich ineffizienter Ansatz zu sein.
Also wirklich muss ich die Anzahl der Logos pro Folie reduzieren, wie es geladen ist .. aber wie?
Ich verwende WP und erweiterte benutzerdefinierte Felder, um den Schieberegler zu füllen. Vereinfachtes Code unten:
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;
?>
Dies würde Ergebnisse in so etwas wie:
<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>
Sehr vereinfacht CSS für das Raster:
.grid-4 {
width: 25%;
}