Ниво ползунок со стрелкой влево изображение прослушивается

Я успешно реализовал слайдер nivo (с темой по умолчанию), за исключением одной проблемы.

Левая стрелка на ползунке показывает небольшую часть правой стрелки. С другой стороны, правая стрелка отображается правильно.

Почему левая сторона спрайта не отображается должным образом, а правая?

Изображение со стрелкой

Единственное место, где объявляется изображение arrow.png, находится в следующем разделе css:

.theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(../Images/slider/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

Спасибо.


html css nivo-slider
person Complexity    schedule 29.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы посмотрите прямо под этим классом в nivo-slider css, вы заметите несколько классов с именами a.nivo-nextNav и a.nivo-prevNav, которые применяют фоновое положение.

Свойство left в a.nivo-prevNav должно быть неправильным для дистрибутива вашего подключаемого модуля. Если вы настроите это так, чтобы оно говорило 11px (вам придется поиграть с ним, чтобы все получилось правильно), это решит вашу проблему.

person Ryan    schedule 29.01.2013
comment
Проблема была в .theme-default .nivo-directionNav как ни странно. При изменении ширины с 30 пикселей на 24 пикселя проблема со стрелкой была решена. - person Complexity; 30.01.2013
comment
@Complexity, чтобы сэкономить место для плагинов, они используют одно и то же изображение как для правой, так и для левой навигации, а затем просто регулируют положение изображения. Это работает, но иногда может сбивать с толку. - person Ryan; 30.01.2013
comment
@ Сложность, поэтому, изменив ширину, вы сделали «окно просмотра», так сказать, меньше, из-за чего стрелка вправо исчезла, однако вы должны быть осторожны с этим, потому что это уменьшает область нажатия кнопки. Если у вас есть время, я бы поиграл с позицией фона, чтобы ваша интерактивная область оставалась прежней. - person Ryan; 30.01.2013