CODEWITHSUNDEEP
iosionic2ion-slides
J. Brandes
J. Brandes

Reputation: 357

Show pager dots on ion-slides ionic component

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.

Upvotes: 12

Views: 18505

Answers (4)

neurona.dev
neurona.dev

Reputation: 1407

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>

Ionic Slides with pagination

Upvotes: 15

S.Yadav
S.Yadav

Reputation: 4509

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!

Upvotes: 0

J. Brandes
J. Brandes

Reputation: 357

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

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

Upvotes: 4

Huiting
Huiting

Reputation: 1396

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.

Upvotes: 1

Related Questions