Docs

[Transfac]

I am building a slider for the mobile/tablet version of my website, dev.transfac.com, and was hoping there is a way to style the navigation on Cornerstone’s Slider element so that the left arrow is on the left of the slider and the right arrow is on the right side of the slider, with both arrows being centered.

[Lely]

Hello There,

Please try adding the following custom CSS:

.flex-direction-nav a.flex-next {
    right: 14px;
    left: initial;
}
.flex-direction-nav a.flex-prev, .flex-direction-nav a.flex-next {
    top: 50%;
}

Hope this helps.

[Transfac]

That worked like a charm! What would I do if I wanted to make the arrows white and a tad bigger?

[Nico]

Hi There,

Try adding this code in your code above

.flex-direction-nav a{
color:white;
font-size:10px;
}

Let us know how it goes.

Thanks.

[Transfac]

I had to use .flex-direction-nav a.flex-prev, .flex-direction-nav a.flex-next to target the arrows. The font-size worked perfectly, but the arrows were already classified as white. It seems there is a transparency setting, so I changed the opacity and now it looks great! Thanks for your help.

[Rahul]

Glad it worked for you.

If you still have anything further to ask, let us know. We’d be happy to assist you with everything.

Thank you.

[Author]

Posts