Изменить положение предыдущей / следующей навигации в Nivo Slider - PullRequest
Новая
       10

Изменить положение предыдущей / следующей навигации в Nivo Slider

1 голос
/ 19 марта 2012

Я использую плагин Nivo Slider jquery, и по большей части это хорошо. Я смог сделать некоторые стили самостоятельно (то есть изменить рамку вокруг изображений, изменить расположение надписей и т. Д.), Но я не могу понять, как изменить положение следующей / предыдущей стрелки.

Я хочу, чтобы стрелки отображались справа от строки заголовка:

enter image description here

Возможно ли это? Я возился с фоном: значения позиций в .theme-default a.nivo-nextNav (и prevNav), но, похоже, не могу получить его там, где я хочу.

Отредактировано для добавления CSS

Это существующий CSS для кнопок навигации: 

theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
.theme-default a.nivo-nextNav {
    background-position:-30px 0; 
    right:15px;
}
.theme-default a.nivo-prevNav {
    left:15px;
}

Создает стрелки, расположенные так:

enter image description here

1 Ответ

2 голосов
/ 19 марта 2012

Это должно быть возможно - вы пытались изменить значения "top", "left" и "right" css?Одна из стрелок должна иметь верхнюю / левую сторону, а другая - верхнюю / правую (как минимум, это настройки по умолчанию).Они используются для определения положения навигационных стрелок, в то время как background-position относится к спрайту изображения (для эффектов наведения и тому подобного).

РЕДАКТИРОВАТЬ

Попробуйте использовать этот CSS: 

.theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
    position:absolute;
}
.theme-default a.nivo-nextNav {
    top:500px; //you'll need to tweak the top and right values to get it into proper position
    right: 300px;
}
.theme-default a.nivo-prevNav {
    top: 500px; // again, tweak these to fit your layout
    left:250px;
}

Возможно, в Nivo Slider можно выбрать, где вы хотите, чтобы навигационная HTML-разметкаидти.В этом случае вы можете поместить его в поле для подписи, а затем расположить его относительно (аналогично тому, как он в настоящее время работает в общем слайдере).Если нет, то это решение CSS должно работать.

...