jQuery “Ciclo” plug-in haciendo que el contenido no central, ¿cómo puedo solucionar este problema?

StackOverflow https://stackoverflow.com/questions/3844626

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.

¿Fue útil?

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top