Пули Nivo Slider не центрируются после добавления дополнительных слайдов

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

Снимок экрана: http://up.vbiran.ir/images/e7r4xxdp09ms0bafb4f.jpg


slider css nivo-slider
person Nojan    schedule 28.09.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Посмотрите файл css для темы. По умолчанию это будут themes/default/default.css.

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

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

arrow_upward
3
arrow_downward

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

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

person Community    schedule 19.02.2012