AnythingSlider Arrow position inside the slider

[burguez]

Hi all,

First of all, congratulations on a great code of AnythingSlider!!

One question though, how can I move the arrows to be inside the images/slider? is it possible? Im using the minimalist-round.css theme.

Thanks in advance!
Burguez

[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

[Mottie]

Hiya!

I’m glad you figure it out, but I just wanted to share that I made a few more themes and hopefully added enough comments in the css to make customizing a theme much easier. Check out the themes here.

[Author]

Posts