jquery "Cycle2" slider-show pager - How to get square icons?

Question

I'm trying to turn the round default pager buttons into square ones.

I managed to change the color of them by modifying the CSS of ".cycle-pager span", but its not responding to border-radius:0px;

Can't find anything in the documentation. Perhaps i'm looking for a 'too easy' method.

Any ideas?

Answer 1

That is because the 'template' used by default is '•' which places a text bullet (like from an unordered list) in the span. To change this, you'll need to change that template using the Cycle2 settings.. something like this:

    $('.slides').cycle({
    pagerTemplate: '<span class="slide-links"></span>'
});

Then you can use your CSS to target and style those links. Hope that helps!