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.

score 11 · Answer 1 · answered Jan 07 '15 at 06:41

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

score 5 · Answer 2 · edited Jun 05 '16 at 22:18

5

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: "&#8592;",
    nextText: "&#8594;"
});

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

Hope it helps.

edited Jun 05 '16 at 22:18

ClayKaboom

1,833
1
22
42

answered Apr 09 '13 at 18:35

brunn

1,323
2
17
37

Flexslider change buttons

2 Answers2