Hi Kayla, thanks for trying Meteor Slides!
There are a couple of ways to approach this issue. If you need actual unique content in the pager buttons, like a thumbnail of the slide or the slide title, I would say to create a custom slideshow template with a second loop. With this you could have far more control over the markup and make sure each button has its own class to make styling them easier.
But it sounds like you just need the unique classes and the content of the pager links can still just be numbers, so that would be overkill.
I think you are doing it correctly for this situation by just tweaking the output of the pager links that are already being generated. But I wouldn’t edit the cycle script if you can avoid it, it will make updates difficult and there are a lot of moving parts so it is easy to break!
I would instead do this in the slideshow.js script so that your hack is easier to re-apply and less likely to break anything. Here you can see an example of this in the Cycle site, though it is a bit more complex than you need: https://jquery.malsup.com/cycle/pager2.html
This is the code I would use to do that:
pagerAnchorBuilder: function(idx, slide) {
return '<a href="#" class="mbutton mbutton-' + ( idx + 1 ) + '">' + ( idx + 1 ) + '</a>';
}
With that code, it is still simply using numbers for the links, but they are also added as classes so that each has a unique class so that they end up looking like this:
<a href="#" class="mbutton mbutton-1">1</a>
The classes use the same convention as the slide classes where they each have a generic class they share and then a specific numbered version. This is more semantic and will avoid the problem of classes that start with numbers.
By the way, the next version of Meteor Slides will support custom slideshow scripts, so if you drop a copy of slideshow.js into your theme when you are done editing it, it will switch to that copy when you update the plugin and won’t break your hack.
