Ich versuche eine Responsive Bildergalerie mit dem exzellenten Cycle 2 jQuery Plugin zu erstellen. Die Galerie enthält sowohl Hoch- als auch Querformatbilder.jQuery Cycle 2 Responsive mit Centered Slides
Ich bin mit der Centered Slides Option (CYCLE2 Zentrum Plugin: http://jquery.malsup.com/cycle2/demo/center.php) und das scheint Probleme in Webkit-Browsern zu verursachen (versuchen Sie Ihre Browser-Fenster Größe ändern, wenn dies zunächst nicht offensichtlich ist!)
Der grüne Hintergrund repräsentiert den Zyklus Container.
Ohne die Center-Optionen hinzugefügt (Daten-Zyklus-center-horz = true Daten-Zyklus-center-vert = true) die ganze Sache gut funktioniert, finden Sie unter:
Ich kann nicht arbeiten heraus, was die Probleme mit der zentrierten Version verursacht.
Der CSS-Code auf die Bilder ist ziemlich minimal:
.cycle-slideshow img {
max-height: 100%;
max-width: 100%;
}
Die CSS ist enthalten Element hier
für jede Hilfe.cycle-slideshow {
background: green;
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin:20px auto;
padding:0;
width:80%;
}
Vielen Dank im Voraus!
Ich glaube nicht, dass Sie Zentrierung mit Bildern verwenden sollten, die größer als der Container sind. Wahrscheinlich ist das Problem, dass die Diashow gestartet wird, bevor alle (sehr großen) Bilder geladen werden.Versuchen Sie, Ihren Code in '$ (window) .on ('load', function() {...}) einzufügen, um dies zu umgehen. – Blazemonger