添加更多幻灯片后，Nivo 滑块项目符号“未居中”答案

【问题标题】：Nivo Slider Bullets "are not centered" after adding more Slides添加更多幻灯片后，Nivo 滑块项目符号“未居中”
【发布时间】：2011-09-28 14:57:51
【问题描述】：

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

截屏：http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg

【问题讨论】：

标签： css slider nivo-slider

【解决方案1】：

如果您在一个页面中使用多个基于默认主题的滑块实例，上述解决方案可能会成为问题。
可能的解决方案：
1> 在 nivo-controlNav 类前面加上您要更改的滑块的 id。例如：如果您有一个 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;
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

查看主题的 css 文件。默认是主题/默认/default.css。

找到它并按照它说的去做：

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

【讨论】：