jQuery “Ciclo” plugin causando contenuto non centra, come posso risolvere questo problema?
-
27-09-2019 - |
Domanda
Sto cercando di utilizzare jQuery "Ciclo" plugin (http://jquery.malsup.com/cycle/) per ruotare testimonianze situato all'interno di <span>
s ...tuttavia il plugin è la causa dei miei contenuti per non essere centrato.Ieri mattina c'è qualcuno qui che ha sottolineato l' <span>
gli elementi sono posizionati in modo assoluto dal plugin: $slides.css({position: 'absolute', top:0, left:0}).hide()
Non so JS e sto ancora lavorando sul mio HTML/CSS, quindi speravo che qualcuno di voi conosceva un fix per questo e mi potrebbe aiutare.Se non oh, va bene :/
Ho provato ad aggiungere left:50%
e anche se non centri la diapositiva è rotto e tutti i miei <span>
s sono presenti in una sola volta.
[Modifica]
Ecco il codice HTML e 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);
}
Da solo, tutto funziona come previsto.Quindi aggiungo jQuery/Ciclo 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)
});
Questo è ciò che le viti di tutto.Come è, il <span>
s vengono visualizzati uno alla volta e fade in e out come dovrebbero, tranne che il testo non è centrata più a causa del posizionamento assoluto.Così ho cambiato left:0
per left:50%
- wha la!Problema risolto testo è centrato, solo che ADESSO le campate sono tutti visualizzati allo stesso tempo, e non c'è la dissolvenza in/out.
Soluzione
Senza il codice non è facile chiamare, ma presumo che le testimonianze sono all'interno di un elemento di blocco di qualche tipo.Se si applica position:relative
a tale elemento, il posizionamento assoluto <span>
s saranno contenuti all'interno.Si dovrebbe davvero applicare qualsiasi posizionamento degli stili si estende su se stessi piuttosto lasciare che il plugin.
Speranza che aiuta
MODIFICA
Va bene provare questo:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
Potrebbe essere necessario impostare manualmente la larghezza del <spans>
s e per corrispondere alla larghezza della div.slideshow