2
Wie setze ich die vertikale Ausrichtung eines Textes innerhalb der flexslider nach unten, direkt über den Seitensteuerelementen?Flexslider vertikale Ausrichtung nach unten
Siehe das Beispiel auf dem Bild.
Es sollte möglich sein, die inneren <div> zu setzen:
position: absolute;
bottom: 0;
Aber das funktioniert nicht wie der <li>...</li> Eintrag nicht die volle Höhe hat. Da die Textlänge dynamisch ist, gibt es unterschiedliche Höhen und daher sollte der Text immer nach unten zur Seitensteuerung ausgerichtet sein.
Das Ergebnis sollte so aussehen:
hier ein Arbeitscodebeispiel:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false
});
});.flexslider {
width: 500px;
}
.flexslider ul, .flexslider ol {
margin: 0;
padding: 0;
}
blockquote, q {
font-size: 14px;
quotes: "»" "«" "›" "‹";
}
p.quoted {
font-size: 11px;
}
.flex-control-paging li {
float: left;
margin: 2px 4px 2px 0;
}
.flex-control-paging {
box-sizing: border-box;
float: left;
list-style: outside none none;
margin: -24px 0 0;
position: relative;
width: 100%;
z-index: 3;
}
.flex-control-paging a::before {
background-color: #b2b2b2;
content: "";
height: 3px;
left: 0;
position: absolute;
top: 15px;
width: 60px;
}
.flex-control-paging a {
border: 0 none;
cursor: pointer;
display: block;
height: 30px;
position: relative;
text-indent: -999em;
width: 62px;
}
.flex-control-paging .flex-active::before, .flex-control-paging .flex-active:hover::before {
background-color: #000000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/woothemes/FlexSlider/master/jquery.flexslider-min.js" type="text/javascript"></script>
<div class="flexslider">
<ul class="slides">
<li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
<li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</q> <p class="quoted">Lorem ipsum</p></div></li>
<li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
</ul>
</div>
Ich löschte meine Antwort, da Zeit weggelaufen und ich weiß nicht, flexslider gut genug für eine schnelle Lösung. Hoffentlich kann ich später mehr Zeit finden. – LGSon
Sorry für die Verwirrung, hoffe du hast jetzt verstanden was ich versuche zu erreichen. – wittich
Ich habe das, also wenn der Slider beginnt zu animieren, werden die CSS Regeln, die ich in meinem Sample gemacht habe überschrieben, was bedeutet, dass ich meinen Kopf in 'flexslider' stecken muss, um zu verstehen, wie es das macht, also kann ich das CSS entsprechend ändern (die mehr Zeit in Anspruch nehmen als ich richtig weiß) ... so wahrscheinlich weiß das vielleicht schon jemand und gibt dir eine Antwort, bevor ich mir etwas Zeit nimm – LGSon