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

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

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

введите здесь описание изображения

Это возможно? Я возился со значениями background:position в .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;
}

Он создает стрелки, расположенные следующим образом:

введите здесь описание изображения


css nivo-slider
person EmmyS    schedule 19.03.2012    source источник
comment
пожалуйста, предоставьте код/скрипку, чтобы мы могли увидеть, где проблема или как это сделать.   -  person w3uiguru    schedule 19.03.2012
comment
background-position: - это не то, как вы перемещаете элементы... оно используется для смещения фонового изображения вокруг внутри самого элемента.   -  person Sparky    schedule 20.03.2012

Ответы (1)


arrow_upward
2
arrow_downward

Это должно быть возможно - вы пытались изменить значения 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 должно работать.

person Jordan Speizer    schedule 19.03.2012
comment
Неа; ни один из них не делает. Добавление существующего css в OP. - person EmmyS; 20.03.2012
comment
Значения справа и слева есть, но в этом примере навигация относительно расположена внутри ползунка. Вот почему nextNav имеет право:15px (это 15px правее края ползунка) и наоборот для prevNav. Если вы хотите, чтобы он располагался справа от строки заголовка, я бы посоветовал разместить его абсолютно. Я отредактирую свой исходный ответ с образцом кода. - person Jordan Speizer; 20.03.2012
comment
Есть ли причина, по которой вы удалили большинство строк в определении nivo-directionNav? Теперь нет фактических URL-адресов для изображений, которые используются в вашем коде. - person EmmyS; 20.03.2012
comment
Я хотел, чтобы вы добавили мои строки к существующим, а не заменили их полностью. Я обновлю свой ответ соответственно. - person Jordan Speizer; 20.03.2012