Nivo Slider толкает изображение вниз

Question

Я пытаюсь использовать слайдер NIVO. Первоначально он был настроен так, чтобы "свернуть" транснациональные события. Работало нормально. Я изменил его на "исчезать", и теперь, когда изображение постепенно исчезает, оно кажется нажатым. У кого-нибудь была эта проблема раньше? Вот jQuery и CSS.

    $(window).load(function() {
    $('#slider').nivoSlider({
    effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed:500, // Slide transition speed
    pauseTime:5000, // How long each slide will show
    startSlide:4, // Set starting Slide (0 index)

/Nevo Slider/

slider {

position:relative;
width:900px;
height:250px;
background:url(images/loading.gif) no-repeat 50% 50%;
margin-bottom: 20px;
}

slider img {

position:absolute;
top:0px;
left:0px;
display:none;
}

slider a {

border:0;
display:block;
} /End of Nevo Slider/

Вот ссылка http://kerrydean.ca/Grey%20River/greyRiverTemplate2.html

Answer 1

У меня была такая же проблема, и я нашел несколько советов в Интернете, но ни один из них не помог мне. Вот правило CSS, которое исправило проблему для меня:

div.nivo-slice { position:absolute; z-index: 99; top:0 }

Я добавил верх:0, и он сдвинул изображения на место. Кроме того, эта проблема смещения изображения, кажется, возникает только при использовании функции "исчезновения".

Answer 2

У меня была такая же проблема, и она была решена, когда я добавил класс theme-default в слайдер div#

<div id="slider" class="nivoSlider theme-default">

и конечно же загрузил default.css

Answer 3

Вам нужно удалить все объекты тега обернутые изображения на слайде.

Пример: от

<ul id="slider">
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
</ul>

в

<div id="slider">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>

Answer 4

Вам необходимо применить .nivoSlider Присвойте свой идентификатор #slider, содержащий изображения, также вы включаете jQuery дважды.

Answer 5

Это в WordPress? Если это так, вам нужно будет скрыть <p> теги, которые добавляются автоматически. Добавьте этот CSS, и это должно сработать (по крайней мере, у меня получилось):

.nivoSlider p { display: none; }