Show pager dots on ion-slides ionic component

Question

I'm trying to create a slider component inside a page in an ionic 2 app. I've gotten it to work as intended with the exception that the pager dots don't show up. The documentation on how to use the pager isn't great. Any ideas where I'm going wrong here?

    <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 have also tried <ion-slides options="{pagination: true}"> and <ion-slides pager="true"> and neither of these have worked.

Edited: Upon inspection in the browser, I'm seeing the pager being rendered with a div container like this: <div class="swiper-pager hide"> So I'm definitely not using the right parameters to unhide the pager. Or there's a bug. I'm using Ionic v2.0.0.

Nacred

Try <ion-slides pager> This is working for me – Escheat

Doesn't work for me. – Nacred

@Escheat that worked for me on ionic 3 :) – Spenserian

Answer 1

Finally got it to work with this as the opening tag of the slides:

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

Nacred

It seems that doesn't work no more on ionic 3. I had to use: <ion-slides pager> – Spenserian

Answer 2

This work for me in 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>

Koroseal

Answer 3

You can try adjusting your position of pager dots. Maybe it is appearing behind your image. Include in your .scss file:

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

I have tested out your code (minus the image), it is appearing on mine.

Escheat

This doesn't work for me. I can see upon inspection that the class "hide" is being added to the pager component when it is rendered. – Nacred

Answer 4

If you are using swiper to slide page, there are a lot of parameters to do the same as-

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

here is the code of paginatin-

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

Complete code can have a look here.
We have demo of slider as- http://idangero.us/swiper/demos/#.WUJGrROGNp8
Hope this will also help you!

Beshore