Show pager points on an ion-slide ion component

Question

I am trying to create a slider component inside a page in an ionic 2 application. I got it for the intended purpose, except that the pager points are not displayed. The documentation on how to use the pager is small. Any ideas I'm wrong about?

  

    <div class="slider-container">
            <ion-slides pager="true">
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/scoping.png' />
                        <p class="slide-title">TITLE 1</p>
                        <p class="slide-text">Body text 1</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/projectmgmt.png' />
                        <p class="slide-title">TITLE 2</p>
                        <p class="slide-text">Body text 2</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/satisfaction.png' />
                        <p class="slide-title">TITLE 3</p>
                        <p class="slide-text">Body text 3</p>
                    </div>
                </ion-slide>
            </ion-slides>
    </div>

I also tried <ion-slides options="{pagination: true}">and <ion-slides pager="true">, and none of them worked.

Edited: . After checking in the browser, I see how the pager is displayed with the div container as follows: <div class="swiper-pager hide"> Therefore, I definitely do not use the correct parameters to display the pager. Or is there a mistake. I am using Ionic v2.0.0.

Answer 1

, :

<ion-slides [options]="{pagination: true}">

Answer 2

Ionic 3:

<ion-content>

  <ion-slides pager>
    <ion-slide>
      <h1>My Slide 1</h1>
    </ion-slide>
    <ion-slide> 
      <h1>My Slide 2</h1>
    </ion-slide>
    <ion-slide>
      <h1>My Slide 3</h1>
    </ion-slide>
  </ion-slides>

</ion-content>

Answer 3

. , . .scss :

.swiper-container-horizontal > .swiper-pagination
{
    bottom          : 50%; //Change accordingly
    z-index         : 99 !important;
}

( ), .

Answer 4

swiper -, , , -

<div class="swiper-pagination"></div>

paginatin -

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });

. - as- http://idangero.us/swiper/demos/#.WUJGrROGNp8
, !