Блог

я использую слайдер Nivo в своем WordPress и vBulletin с Iframe. но когда я добавил больше слайдов, маркеры навигации повернулись вправо и больше не центрируются. я просто знаю о CSS без jquery. как я могу решить эту проблему?

Скриншот: http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg

Приведенное выше решение может быть проблемой в случае, если вы используете несколько экземпляров слайдеров на основе темы по умолчанию на странице.
Возможные решения:
1> Префикс класса nivo-controlNav с идентификатором слайдера, который вы меняете. например: если у вас есть слайдер с идентификатором 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;
}
  

Надеюсь, это поможет.

Взгляните на файл css для темы. По умолчанию будет использоваться themes/default/default.css.

Найдите это и сделайте, как там сказано:

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