Re: AnythingSlider Arrow position inside the slider

[burguez]

Hi I figured it out. I think I needed a bit of time off the computer. Here is what I did.

First create the arrows (back and fwd and their hovers).

Then on the minimalist-round.css modify the following (check my comments inline //):

div.anythingSlider-minimalist-round .arrow a {

display: block;

height: 40px;

margin-top: -20px; /* half height of image */

width: 130px; //Give more width so arrows move to the center of the slider.

text-align: right; //move the arrows to the center of the slider.

outline: 0;

/*background: url(../images/arrows-minimalist.png) no-repeat;*/ //you dont need these images anymore. Since you will add them manually.

}

div.anythingSlider-minimalist-round .forward { color:#FFF; right: 0; }

div.anythingSlider-minimalist-round .back { color:#FFF; left: 0; }

div.anythingSlider-minimalist-round .forward a { color: transparent; background: url(../images/arrows-minimalist_Fwd.png) no-repeat; background-position: left bottom; }// Add the normal forward arrow

div.anythingSlider-minimalist-round .back a { color: transparent; background: url(../images/arrows-minimalist_Back.png) no-repeat; background-position: right bottom; }// Add the normal back arrow

div.anythingSlider-minimalist-round .forward a:hover, div.anythingSlider-minimalist-round .forward a.hover { background: url(../images/arrows-minimalist_FwdH.png) no-repeat; background-position: left top; } // Add the hover forward arrow

div.anythingSlider-minimalist-round .back a:hover, div.anythingSlider-minimalist-round .back a.hover { background: url(../images/arrows-minimalist_BackH.png) no-repeat; background-position: right top; }// Add the hover back arrow

And that will center the arrows inside the slider.

If you see any optimization or a better way please let me know!

Regards,
Victor Gonzalez