How can I add pagination dots at the bottom of my dashboards when swiping between them?

[unkempt mulch]

I'm using Swipe Navigation, and I want to display dots (● ○ ○) at the bottom that update dynamically when I swipe between dashboards.

Is there a way to track the active dashboard and update the dots automatically?

Thanks in advance! 😊

[pearl isle]

you can do the manual way, to add dots at the bottom yourself

you can use mdi:circle-outline and mdi:circle

[stuck pewter]

If you want to make something more dynamic, here's an option that you can adapt for your use. It uses a custom:button-card and some JavaScript. yaml type: custom:button-card name: test styles: card: - background-color: > [[[ if (location.pathname.split('/').pop().toLowerCase() == this._config.name.toLowerCase()) return "red"; else return "blue"; ]]] You could change the this._config.name.toLowerCase()) to the appropriate identifier for each dot like page1.

Now, the problem with this method is that the entire code block would have to be duplicated on each dashboard and you have to "program" each dot. There are options for duplicating code (which isn't difficult), but, honestly, Ellie's solution is way easier.

But, now that I think about it, templating the custom:button-card would not be difficult for this case, but you'd probably still need to use a method to duplicate the "dots card". ... But, I just thought of another relatively easy method to accomplish that... I might play with it this weekend and see what I can come up with.