Cycle2: pager only displays link to first slide and hides the others

Question

I'm using Cycle2 with its carousel plugin. I tried to add their pager functionality to my page, like this:

First, I created the container div:

<div id="concluidos-navigation" class="cycle-pager"></div>

Then, I set the plugin options like this:

<ul class="cycle-slideshow"
            data-cycle-slides="> li"
            data-cycle-fx=carousel
            data-cycle-allow-wrap=false
            data-cycle-pager="#concluidos-navigation"
        >

The resulting HTML is this, for the first slide:

<span class="cycle-pager-active">•</span>

But for every other slide, the result is:

<span style="display: none;">•</span>~

Where does this "display: none" comes from? Am I missing something? If I inspect the element on Chrome and remove the "display: none", all links show up and work perfectly to navigate between slides.

Here's the fiddle

Answer 1

hide-non-active could be the reason perhaps. It defaults to true. [Link].

Answer 2

Ok, I was able to fix it with a workaround by overriding the default style. First I added this to the plugin initialization:

data-cycle-pager-template="<strong class='cycle-pager-nav-circle'><a href=#></a></strong>"

And then I added a CSS rule to the "cycle-pager-nav-circle" class:

display: inline-block !important;

However, if anyone as a more clean solution, please give your suggestions.