jQuery „Cycle“ Plugin verursacht Inhalt nicht Zentrum, wie kann ich dieses Problem beheben?
-
27-09-2019 - |
Frage
Ich versuche, die jQuery „Cycle“ Plugin (http://jquery.malsup.com/cycle/) zu drehen Zeugnisse innerhalb <span>
s gelegen zu verwenden ... aber das Plugin meine Inhalte verursacht nicht zentriert werden. Gestern Morgen jemand hier darauf hingewiesen, die <span>
Elemente absolut vom Plugin positioniert werden: $slides.css({position: 'absolute', top:0, left:0}).hide()
Ich weiß JS nicht und ich arbeite immer noch auf meinem HTML / CSS, so dass ich hoffte, dass jemand hier eine Lösung für dieses kannte und mir helfen könnte. Wenn nicht oh gut: /
Ich habe versucht, indem left:50%
und obwohl es zentriert wird der Schieber gebrochen und alle meine <span>
s erscheint auf einmal.
[Bearbeiten]
Hier ist der HTML & CSS:
<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />
.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
}
Allein, alles funktioniert wie geplant. Dann füge ich die jQuery / Cycle-Plugin:
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
Dies ist, was Schrauben sie alle nach oben. Wie werden die <span>
s einen nach dem anderen gezeigt und Ein- und Ausblendung wie sie eigentlich sind, mit Ausnahme des Text nicht mehr aufgrund der absoluten Positionierung zentriert ist. Also änderte ich left:0
zu left:50%
- wha la! Problem gelöst Text zentriert ist, mit Ausnahme JETZT die Spannweiten sind alle zur gleichen Zeit gezeigt und es gibt kein Ausbleichen in / out.
Lösung
Ohne den Code ist dies nicht einfach zu nennen, aber ich nehme an, die Zeugnisse in einem Blockelement von einer Art sind. Wenn Sie die absolut positionierten position:relative
s <span>
auf dieses Element gelten innerhalb enthalten sein. Sie sollten wirklich keine Positionierung Stile gelten für die Spannweiten selbst -. Vielmehr, dass an das Plugin verlassen
Ich hoffe, das hilft
Bearbeiten
Okay, versuchen Sie dies:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
Sie müssen möglicherweise die Breite der <spans>
s manuell eingestellt und die Breite des div.slideshow