jQuery « Cycle » plugin contenu provoquant de ne pas le centre, comment puis-je résoudre ce problème?
-
27-09-2019 - |
Question
Je suis en train d'utiliser le plugin « Cycle » jQuery (http://jquery.malsup.com/cycle/) aux témoignages rotate situés dans <span>
s ... mais le plug-in est à l'origine de mon contenu pour ne pas être centrée. Hier, quelqu'un matin ici a les éléments de <span>
sont absolument positionnés par le plug-in: $slides.css({position: 'absolute', top:0, left:0}).hide()
Je ne sais pas JS et je travaille toujours sur mon HTML / CSS, donc j'espérais que quelqu'un ici connaissait une solution pour cela et pourrait me aider. Sinon tant pis: /
Je l'ai essayé d'ajouter left:50%
et bien il centre, la lame est cassée et tous mes <span>
s apparaissent à la fois.
[Modifier]
Voici le code HTML et 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);
}
Seul, tout fonctionne comme prévu. Puis ajouter le plugin jQuery / Cycle:
// 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)
});
est ce que vis le tout. Comme il est, les <span>
s sont présentés un à la fois et fondu et sortir comme ils sont censés, à l'exception du texte ne centré plus en raison du positionnement absolu. Alors j'ai changé left:0
à left:50%
- wha la! Problème résolu texte est centré, sauf que maintenant les portées sont tous présentés en même temps et il n'y a pas fondu avant / arrière.
La solution
Sans le code ce n'est pas facile d'appeler, mais je suppose que les témoignages sont dans un élément de bloc de quelque sorte. Si vous appliquez position:relative
à cet élément la position absolue <span>
s seront fournis. Vous ne devez pas appliquer vraiment tous les styles de positionnement aux travées eux-mêmes -. Laissent plutôt que le plug-in
L'espoir qui aide
EDIT
Ok, essayez ceci:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
Vous devrez peut-être régler manuellement la largeur des <spans>
s et à la largeur de la div.slideshow