Nivo Slider - 在滑块底部定位导航子弹,而不是在下面

时间:2014-01-02 02:00:56

标签: javascript jquery html css nivo-slider

我正在创建一个网站并使用Nivo Slider创建一个jQuery滑块。

我遇到了用于显示用户正在查看哪张幻灯片的项目符号的问题。我希望子弹出现在滑块的图像上,而不是下面。

我设法使用以下CSS代码将项目符号移动到该位置:

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../images/banner/dots.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:0px;
    float:left;
}

以下是它们应该如何显示的屏幕截图: http://i41.tinypic.com/mt59gi.png

但是一旦我调整了浏览器窗口的大小,子弹就会移出滑块,如下所示:http://i40.tinypic.com/2ldtus8.png

我改变了顶部:365px;也是一个百分比,但这似乎产生了相同的结果。

即使调整浏览器窗口大小,有没有办法将子弹保留在滑块上?滑块宽度为100%,因此滑块也会随浏览器窗口调整大小。如果可能的话,我最好保持这种方式。

非常感谢任何帮助。

编辑:我已将测试版发布到www.fearless-music.net/test /

2 个答案:

答案 0 :(得分:0)

对于任何相关代码都无法真正做很多事情,但我可以告诉你包含.nivo-controlNav需要position: relative的内容是什么方式,子弹将被限制在该区域内。

答案 1 :(得分:0)

如果在调整浏览器大小时图像的宽度发生变化,那么高度很可能也是如此。

在这种情况下,如果高度正在改变您的代码“top:365px;”变得无关紧要。

IMO我会通过媒体查询调整包装器顶部的距离......这样的事情:

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}

@media (max-width: 960px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 265px;
    z-index:3000 !important;
}

}

@media (max-width: 768px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 165px;
    z-index:3000 !important;
}

}

@media (max-width: 400px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 65px;
    z-index:3000 !important;
}

}

我最好看看你要补偿的断点,看看图像的高度变化,然后确定你的css中“top”的必要值。

更多信息here