Question

I have implemented the nivo slider (with default theme) successfully except for one issue.

The left arrow on the slider is showing a small part of the right arrow. The right arrow on the other hand is being displayed correctly.

How come the left side of the sprite is not rendered properly but the right one is?

Arrow picture

The only place where the arrow.png picture is declared is in the next css section:

.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;
}

Thanks.

Answer 1

If you look right below that class in the nivo-slider css you will notice some classes called a.nivo-nextNav and a.nivo-prevNav which are applying a background position.

The left property on a.nivo-prevNav must be wrong for the distribution of the plugin you have. If you adjust that to say 11px (you will have to play with it, to get it just right) it will fix your problem.