jQuery “Ciclo” plug-in haciendo que el contenido no central, ¿cómo puedo solucionar este problema?
-
27-09-2019 - |
Pregunta
Estoy tratando de utilizar el jQuery "Ciclo" plugin (http://jquery.malsup.com/cycle/) para rotar testimonios localizados dentro <span>
s ... sin embargo, el complemento está causando mi contenido al no estar centrado. Ayer por la mañana alguien aquí señaló los elementos <span>
están siendo absolutamente posicionados por el plugin: $slides.css({position: 'absolute', top:0, left:0}).hide()
No sé JS y todavía estoy trabajando en mi HTML / CSS, así que estaba esperando que alguien aquí sabía una solución para esto y me podría ayudar. Si no oh bien: /
He intentado añadir left:50%
y aunque se centra, la tapa está roto y todos mis <span>
s aparecer a la vez.
[Editar]
Aquí está la CSS y HTML:
<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);
}
A solas, todo funciona según lo previsto. Luego agregar el plugin jQuery / Ciclo:
// 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)
});
Esto es lo que los tornillos de todo. Como es, las s <span>
se muestran uno a la vez y aparecen y desaparecen como se supone que, salvo que el texto no se centra más debido a la posición absoluta. Así que cambié left:0
a left:50%
- wha la! Problema resuelto texto se centra, excepto que ahora los vanos se muestran todas al mismo tiempo y no hay ninguna está desapareciendo de entrada / salida.
Solución
Sin el código de esto no es fácil de llamada, pero supongo que los testimonios son dentro de un elemento de bloque de algún tipo. Si se aplica a ese elemento position:relative
los <span>
s posición absoluta estarán contenidos dentro. Realidad no se debe aplicar cualquier estilos de posición a los vanos ellos mismos -. Prefiere dejar que el plug-in
Espero que ayude
Editar
De acuerdo intente lo siguiente:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
Es posible que tenga que configurar manualmente el ancho de las <spans>
s así para que coincida con el ancho de la div.slideshow