Плагин jQuery "цикл" вызывает контент не в центре, как я могу это исправить?
-
27-09-2019 - |
Вопрос
Я пытаюсь использовать плагин «Цикл jQuery» (http://jquery.malsup.com/cycle/), чтобы повернуть отзывы, расположенные в <span>
S ... Однако плагин вызывает мой контент не быть центрирован. Вчера утро кто-то здесь указал <span>
Элементы абсолютно расположены плагином: $slides.css({position: 'absolute', top:0, left:0}).hide()
Я не знаю JS, и я все еще работаю над своим HTML / CSS, поэтому я надеялся, что кто-то здесь знал починить для этого и мог мне помочь. Если нет, ну хорошо: /
Я пытался добавить left:50%
И хотя он центры, слайд сломан и все мои <span>
S появляются одновременно.
Редактировать
Вот 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);
}
Один, все работает как планируется. Затем добавляю плагин 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)
});
Это то, что все это винты. Как есть, <span>
s показан один за раз, и выцветает, как будто они должны, за исключением того, что текст больше не сосредоточен из-за абсолютного позиционирования. Так что я изменил left:0
к left:50%
- wha la! Решающий задача текста сосредоточен, за исключением того, что теперь промежутки все время отображаются одновременно и нет ввода / выезда.
Решение
Без кода это не легко позвонить, но я предполагаю, что отзывы находятся в пределах блочного элемента некоторой. Если вы применяете position:relative
к этому элементу абсолютно позиционированный <span>
S будет содержаться внутри. Вы не должны на самом деле применять какие-либо стили позиционирования на самих промежуток - скорее оставьте это на плагин.
надеюсь, это поможет
РЕДАКТИРОВАТЬ
Хорошо, попробуйте это:
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
position:relative;
}
.slideshow span {
display:block;
}
Вам может потребоваться вручную настроить ширину <spans>
S, а также соответствовать ширине div.slideshow