我在我的WordPress和vBulletin中使用Nivo滑块和Iframe。但是当我添加更多幻灯片时,导航子弹转向右侧,并且不再居中。 我只知道关于CSS一个没有jQuery。我怎么解决这个问题 ?添加更多幻灯片后,Nivo滑块子弹“不居中”
截图:http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg
我在我的WordPress和vBulletin中使用Nivo滑块和Iframe。但是当我添加更多幻灯片时,导航子弹转向右侧,并且不再居中。 我只知道关于CSS一个没有jQuery。我怎么解决这个问题 ?添加更多幻灯片后,Nivo滑块子弹“不居中”
截图:http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg
看一看为主题的CSS文件。默认的将是themes/default/default.css。
找到这个做,因为它说:
.theme-default .nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
margin-left:-40px; /* Tweak this to center bullets */
}
上述解决方案可以在情况下,问题,如果您使用的是基于默认的主题滑块多个实例中的页面。
可能的解决方案:
1>将nivo-controlNav类添加为您正在更改的滑块的标识。 例如:如果你有一个ID nivoSlider123滑块,你应该重写利润率:
jQuery('div#nivoSlider123 .nivo-controlNav').css('position:absolute;left:50%;bottom:-42px;margin-left:-40px;');
现在你可以调整的数值区间左,而不影响其他滑块。
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;
}
希望这有助于。
非常好,乐于助人,非常感谢 – Nojan
thx杰伊,它运作良好: - * – Nojan