Question

我在我的Wordpress中使用Nivo Slider，在iframe中使用vBulletin。但是当我添加更多幻灯片时，导航子弹转向右侧，并且不再居中。我只知道CSS没有jquery。我该如何解决这个问题？

ScreenShot：http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg

Answer 1

如果您在页面中使用多个基于默认主题的滑块实例，则上述解决方案可能会出现问题 可能的解决方案：
1 GT;使用您正在更改的滑块的id为nivo-controlNav类添加前缀。例如：如果你有一个id为nivoSlider123的滑块，你应该将边距覆盖为：

jQuery('div#nivoSlider123 .nivo-controlNav').css('position:absolute;left:50%;bottom:-42px;margin-left:-40px;');

现在你可以调整margin-left的值而不影响其他滑块。

2 - ;使用更通用的CSS代码：

.theme-default .nivo-controlNav {
    position:absolute;
    bottom:-42px;
    /*left:50%; margin-left:-40px;*/ /* Tweak this to center bullets */
    width:100%;text-align:center;
}
.theme-default .nivo-controlNav a {
    /*display:block;width:22px;height:22px;background:url(bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;*/
    display:inline-block !important; width:22px; height:22px; background:url(bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px;
}

希望这有帮助。

Answer 2

查看主题的css文件。默认值为themes / default / default.css。

找到这个并按照它说：

.theme-default .nivo-controlNav {
    position:absolute;
    left:50%;
    bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}

添加更多幻灯片后，Nivo Slider项目符号“不居中”

2 个答案: