Vertikal ausrichten Slick carousel navigation Pfeile mit dia-Bild und nicht den text darunter
Muss ich vertikal ausrichten, dass die Navigations-Pfeile mit den dia-Bild-egal, was die Fensterbreite ist. Derzeit bringt es bei 50% der gesamten Folie. Ich hoffe, ich konnte das auch mit CSS machen, aber wie es scheint, müssen eventuell mit JavaScript gemacht werden. Wenn das der Fall ist, jQuery ist in Ordnung und es muss lediglich die Unterstützung von modernen Browsern (IE 11+).
Der schwierige Teil über dieses ist, dass es braucht, um bei 50% des Bildes und nicht der gesamte Behälter, da der text unter dem Bild kann in verschiedenen Höhen.
Was es gerade tut:
Was ich brauche, es zu tun: (Hinweis: der nav-Pfeile sind vertikal zentriert mit dem Bild und sollte werden egal was Fensterbreite)
Hier ein JSFiddle: https://jsfiddle.net/thebluehorse/2wuq3feb/5/
<div class="container">
<div class="list clearfix">
<div class="slide">
<img src="http://placehold.it/800x350">
<ul>
<li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li>
</ul>
</div>
<div class="slide">
<img src="http://placehold.it/800x350">
<ul>
<li>Lorem ipsum dolor sit amet, et hymenaeos elit orci, rutrum dolor magna pellentesque ante euismod magna, sodales turpis quos class condimentum. Integer in vel etiam. Etiam pellentesque nibh phasellus sed, eget ipsum enim sed in et at, non ligula quis egestas sed quis. Lectus vitae, lobortis vestibulum maecenas auctor lorem eros, luctus vitae aliquam aliquam ipsum ligula nascetur, habitasse eu lectus imperdiet leo. Ut est fusce class conubia nunc felis, proin aliquam vitae nunc accumsan orci. A eu erat in.</li>
<li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li>
</ul>
</div>
<div class="slide">
<img src="http://placehold.it/800x350">
<ul>
<li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li>
</ul>
</div>
</div>
</div>
<style>
.container {
position: relative;
width: 80%;
margin: auto;
}
.slide {
float: left;
height: 100%;
min-height: 1px;
}
img {
width: 100%;
display: block;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
body {
background-color: #aaa;
}
</style>
<script>
$('.list').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
</script>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gut, was über die Verwendung von 2 Karussells? Eine für die Bilder, die mit Pfeilen auf, und eine andere, die für fließenden Inhalt, ohne Pfeile. Es ist die sauberste Lösung, die ich denken konnte: https://jsfiddle.net/mq9avx5g/2/
Macht es die Verwendung von Slicks
asNavFor
zu machen, Karussells handeln:Sie können auf folgende Weise-Taste in der Mitte des Bildes mithilfe von JQuery.
Arbeiten Geige
überschreiben die css-Regel, die position der beiden Pfeil-auf diese Weise:
Ergebnis: jsfiddle
Habe ich aktualisiert mit dem JS fiddle mit der Lösung immer Pfeile mittig ausrichten mit dem Bild, auch wenn die Bilder auf den einzelnen Folien sind von unterschiedlicher Höhe.
Arbeiten JSFiddle hier
Alles, was Sie tun müssen, ist, überschreiben die
top:%50
Eigenschaft auf.slick-prev
und.slick-next
.Siehe Geige.