JQuery “Cycle” Plugin fazendo com que o conteúdo não centralize, como posso consertar isso?
-
27-09-2019 - |
Pergunta
Estou tentando usar o plugin "Cycle" jQuery (http://jquery.malsup.com/cycle/) para girar depoimentos localizados dentro <span>
S ... No entanto, o plug -in está fazendo com que meu conteúdo não seja centrado. Ontem de manhã alguém aqui apontou o <span>
Os elementos estão sendo absolutamente posicionados pelo plugin: $slides.css({position: 'absolute', top:0, left:0}).hide()
Eu não conheço JS e ainda estou trabalhando no meu HTML/CSS, então esperava que alguém aqui soubesse uma solução para isso e pudesse me ajudar. Se não bem:/
Eu tentei adicionar left:50%
e embora centralize, o slide está quebrado e todo o meu <span>
S aparecem imediatamente.
Editar
Aqui está o 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);
}
Sozinho, tudo funciona como planejado. Então eu adiciono o plug -in 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)
});
É isso que estraga tudo. Como é, o <span>
S são mostrados um de cada vez e desaparecem e desbotam como se eles deveriam, exceto que o texto não está mais centrado devido ao posicionamento absoluto. Então eu mudei left:0
para left:50%
- O que la! O texto resolvido pelo problema está centrado, exceto que agora todos os vãos são mostrados ao mesmo tempo e não há desbotamento.
Solução
Sem o código, isso não é fácil de ligar, mas presumo que os depoimentos estejam dentro de um elemento de bloco de algum tipo. Se você se inscrever position:relative
para esse elemento o absolutamente posicionado <span>
s estará contido por dentro. Você realmente não deve aplicar nenhum estilos de posicionamento aos próprios vãos - mas deixe isso no plug -in.
espero que ajude
EDITAR
Ok, tente isso:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
Pode ser necessário definir manualmente a largura do <spans>
s também para corresponder à largura do div.slideshow