Pagination bullets in slides component not appearning

[brandyscarney]

From @chandanch on November 22, 2016 12:25

Ionic version: (check one with "x") [ ] 1.x [x] 2.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Pagination bullets in Slides component is not showing even if the pager attribute is specified. Even in the component docs its not showing up. Please refer to this: http://ionicframework.com/docs/v2/components/#slides It stopped working from 2.0.0-beta-11 onwards. It was working in 2.0.0-beta-10

Expected behavior:

The pagination bullets should show so that it indicates the users that there are more slides and users and slide on.

Steps to reproduce:

1. Add the Slides component within the <ion-content>
2. Add the pager attribute to the <ion-slides>.
3. Run the application, the pager does not show up in the slides.

Related code:

<ion-header>
  <ion-navbar>
    <ion-title>Slides</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-slides pager>
      <ion-slide style="background-color: green; color: #fff">
        <h2>Slide 1</h2>
      </ion-slide>
      <ion-slide style="background-color: blue; color: #fff">
        <h2>Slide 2</h2>
      </ion-slide>
      <ion-slide style="background-color: red; color: #fff">
        <h2>Slide 3</h2>
      </ion-slide>
    </ion-slides>
</ion-content>

Please refer to this plunker: http://plnkr.co/edit/dPzPRE?p=preview

Ionic info: :

Cordova CLI: 6.4.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-rc3
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
ios-deploy version: Not installed
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v4.4.5
Xcode version: Xcode 8.1 Build version 8B62

Copied from original issue: driftyco/ionic#9282

[brandyscarney]

It was removed as an attribute on the slider and instead should be passed in the options like the following:

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

The docs are outdated though so I'll move this to the site. Thanks!

[chandanch]

This is a very good approach for specifying the attributes for a component.

Suggestion: We can follow the same approach for other components as well such as toggle, radio etc.

For example in the toggle component we can specify the attributes like this:

<ion-list>
     <ion-item>
        <ion-label>AirPlane Mode</ion-label>
        <ion-toggle [(ngModel)]="airplanemode" [options]="{color:'secondary',disabled:false,checked:true}"></ion-toggle>
      </ion-item>
 </ion-list>

[nathan5x-zz]

Looks like [options] is deprecated. This is one of the other reasons why I was unable to set the "pagination" property for custom Pager display.

[naveenkumarkg]

Hi i am facing the same issue `

Account no: xxx-xxxx-xxx

            <ion-slide>
                <h5>Your Loan Balance</h5>
            </ion-slide>
            <ion-slide>
                <h5>Last transaction</h5>
            </ion-slide>
        </ion-slides>`

When i am in mobile view in chrome console i can't see the slider pagination . When i am on full screen w/o mobile view i can see the dotted pagination type . I have tried to override the CSS from .swipe-wrapper{display:flex} to .swipe-wrapper{display :block !important;} , when I change the css I cant see the second and 3rd slider . Why is this so complicated disturbing so much

[acexode]

mine at first display only one active bullet, then i set the button position to relative

[haifzhan]

<ion-slides pager></ion-slides> doesn't display pagination bullets. any help?