Pager for ion-slides not showing

Ionic Framework ionic-v3
1

I can’t for the life of me get the pager dots to show up when using <ion-slides> I have tried <ion-slides pager="true"> , <ion-slides options="{pagination: true}"> and <ion-slides pager> but the pager dots do not appear. When I inspect the web browser output, I’m seeing the pager div as <div class="swiper-pagination hide">

Any ideas how to get the pager to render and not have the “hide” class added to it?

2

Finally got this working with a tiny change: <ion-slides [options]="{pagination: true}">

1 Like
3

Hi there!

I got the same problem and tried everything including your answer: <ion-slides [options]="{pagination: true}"> but still didn’t work! any help for this??? Thanks

1 Like
6

I’m Having the same issue, and this:

[options]="{pagination: true}"

didn’t work.

any other solution ?

1 Like
7

Really ?
If yes , can you please ulpoad your snippet here?

8

use [options]="{pager: true}" instead

9

I’ve tryied that two, but didnt work so i used the CSS class to solve the problem.
i force a display:block !important; in hes class

10

It seems like it depends on the version of Ionic you’re using. I just updated to 2.0.0 (from 2.0.0-rc.2) and now my original solution doesn’t work anymore. Changing to <ion-slides pager="true"> seems to do the trick now.

11

Till Ionic2 RC.4

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

From Ionic2 RC.5

<ion-slides pager="true"">

See CHANGELOG.md of Ionic2 RC.5

P.S.: Even “options” of ion-slides is marked as deprecated since RC.5, it seems that actually using options after RC.5 doesn’t work anymore correctly

1 Like
12

I realized when I add the options its there but its hidden, so I just added some CSS so that it shows on the intended page.

For the Page:

ion-slides pager paginationType=“bullets”

The CSS:

.hide,
[hidden],
template {
display: block !important;
}

This worked for me.

1 Like
13

yeah, work fine for me.

14

working with slides, I realized that slider option is deprecated. We need add to ion-slides attributes like
<ion-slides pager="true" spaceBetween="10">

15

Use the syntax like this for Ionic v3.9

<ion-slides centeredSlides="true" pager="true" autoplay="3000" loop="true" slidesPerView="1.6">

//your content

</ion-slides>