Nivo 滑块将图像向下推

发布于 2024-11-25 07:01:27 字数 842 浏览 0 评论 0原文

我正在尝试使用 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

原文

I'm trying to use the nivo slider. I had it originaly set to "fold" the trasnistions. It worked fine. I changed it to "fade" and now when the image fades to the next, it appears pushed down. Anyone had this issue before? Here is the jQuery and 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/

Here is a link
http://kerrydean.ca/Grey%20River/greyRiverTemplate2.html

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

两相知 2024-12-02 07:01:28

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

示例：从

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

You need remove all object tag wrapped image on your slide.

Example: from

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

回复收藏 0 原文

乖乖 2024-12-02 07:01:27

我遇到了同样的问题，我在网上找到了一些提示，但没有一个对我有用。这是为我解决问题的 CSS 规则：

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

我添加了 top:0 并将图像移动到位。此外，这种图像移位问题似乎仅在使用“淡入淡出”功能时才会发生。

I had this same problem and I found several tips across the web but none of them worked for me. Here is the CSS rule that fixed the problem for me:

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

I added the top:0 and it shifted the images into place. Also, this image shifting issue seems to only happen when using the 'fade' feature.

回复收藏 0 原文

为人所爱 2024-12-02 07:01:27

我遇到了同样的问题，当我将 theme-default 类添加到 div#slider

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

并当然加载了 default.css时，它就解决了

I had the same problem and it solved when I added the theme-default class to the div#slider

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

and of course loaded the default.css

回复收藏 0 原文

薄荷港 2024-12-02 07:01:27

您需要将 .nivoSlider 类应用到容纳图像的 #slider id，此外，您还要包含 jQuery 两次。

回复收藏 0 原文

圈圈圆圆圈圈 2024-12-02 07:01:27

是在 WordPress 中吗？如果是这样，您将需要隐藏自动添加的

标签。添加这个CSS，这应该可以解决问题（至少对我有用）：

.nivoSlider p { display: none; }

Is it in WordPress? If so, you will need to hide the <p> tags that get added automatically. Add this CSS and this should do the trick (at least it worked for me):