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

我遇到了同样的问题，当我将主题默认类添加到div＃slider

时，它就解决了

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

当然加载了default.css

Answer 3

您需要将.nivoSlider类应用于包含图像的#slider id，同样，您还要包含jQuery两次。

Answer 4

是否在WordPress中？如果是这样，您需要隐藏自动添加的<p>标记。添加这个CSS，这应该做的伎俩（至少它对我有用）：

.nivoSlider p { display: none; }

Answer 5

您需要删除幻灯片上的所有对象标记包装图像。

示例：来自

<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>

Nivo滑块推下图像

5 个答案: