How to Create a Page counter?

[dickeddocks]

So I was wondering If there was a way to put a page counter in Onsen, by that I mean the three little dots that you see at the bottom of your iphone or android phone home screen when scrolling through pages Im using something similar to this ->
http://codepen.io/negibouze/pen/jEvOYz

So i want it that the three dots float at the bottom of my screen to indicate that the user can swipe left or right, and dots change as I scroll, so if Im on the second page, the second dot is bigger than the rest

EDIT: Also, how can I make it so if I swipe left to the carousel, it opens the menu

[munsterlander]

@dickeddocks For the swipe to open the menu, I did a similar tutorial that you can grab some bits from to start with. Just understand that you are mixing to Onsen components that are both listening for swipe, so you have several ways of going about this. Within the gesture detector docs, there is some good information, but in short, you could listen for swipe and if not all the way to the left, move the carousel, but if at the end, then open the menu. You could also do a length of swipe check, short swipe for carousel and a long swipe for the menu. Either way you go, this guide will at least get you started. Be prepared for some interesting things happening that you will have to troubleshoot your way through.

[Fran Diox]

About the dots, I think you mean something like this. That example is made with React but it’s basically the same for Angular or anything else. Just use the postchange event to change the color/shape of the dots.

[dickeddocks]

@Fran-Diox said:

postchange

Yes this is it, but I am a little new to coding and am having problem understanding how to implement the postchange in my code

Im using Monaca, and heres the code for the dots

<div style="text-align: center; font-size: 20px; position: absolute; bottom: 36px; left: 0px; right: 0px;"><span style="cursor: pointer;">●</span><span style="cursor: pointer;">○</span><span style="cursor: pointer;">○</span><span style="cursor: pointer;">○</span></div>

I want it so that when I swipe to next page, the next dot gets highlighted
Thank you very much :)

[Nikola]

@dickeddocks There is a similar question on StackOverflow. I answered it there so you can check the answer, Hope it helps.

Here’s the link:
http://stackoverflow.com/questions/42184917/page-counter-in-onsen-ui/42408077#42408077