Page counter in Onsen UI

Question

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

enter code here

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

Answer 1

If you're using <ons-carousel> as in the template, just add an id to the carousel and add an postchange event listener (on the initialization of the page where the carousel is) where you can change the sizes of the dots.

Also change the content of the <ons-carousel-cover> tag to a list containing images of dots or something similar.

Example Javascript:

<script>
    ons.bootstrap();

    document.addEventListener("init",function(event){

        if(event.target="#id_of_ons_page_containing_carousel"){

           $('#id_of_carousel').on("postchange", function(){   

               var index=document.querySelector('#id_of_carousel').getActiveIndex();
               $('#dot0').height(10);
               $('#dot1').height(10); 
               $('#dot2').height(10);
               $('#dot'+index).height(15); 

           });
        }
    });  
  </script>

In this case the <ons-carousel-cover> has the following content:

<ons-carousel-cover><div class="cover-label center">
        <ul>
            <li><div>
                <img id="dot0" height="15" src="White_dot.png" alt="" />
            </div></li>
            <li><div>
                <img id="dot1" height="10" src="White_dot.png" alt="" />
            </div></li>
            <li><div>
                <img id="dot2" height="10" src="White_dot.png" alt="" />
            </div></li>
       </ul>

</div></ons-carousel-cover>

In order for the dots to appear in one line add the following css:

ul {
    list-style: none;
    padding-left: 0;

}
ul li{
  display: inline;
  min-height: 40px;
}
ul li div{
  display: table-cell;
  vertical-align: middle;
  height: 40px;
  line-height: 40px;
}