Flexslider change buttons

Question

is there anyway I can change the little navigate buttons into text buttons on flexslider? I can't find it anywhere on internet.

Simplex

Answer 1

To use an image as the navigation button:

.flex-direction-nav a:before  { 
    content: " ";
    display: block;
    background: url('../path-to-image/flexslider-left.png') no-repeat;
    width: 40px;
    height: 40px;
}
.flex-direction-nav a.flex-next:before  { 
    content: " ";
    display: block;
    background: url('../path-to-image/flexslider-right.png') no-repeat;
    width: 40px;
    height: 40px;
}

Norman

Answer 2

You can use the prevText and nextText properties, like this (I'm using arrows but you can change to whatever text you want):

$('.flexslider').flexslider({
    prevText: "←",
    nextText: "→"
});      

And then in flexslider.css remove the background-image and text-indent properties from .flex-direction-nav a.

Hope it helps.

Kinglet