ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.94k stars 13.52k forks source link

Pagination bullets in slides component not appearning #9282

Closed chandanch closed 7 years ago

chandanch commented 7 years ago

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
brandyscarney commented 7 years ago

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!

brandyscarney commented 7 years ago

This issue was moved to driftyco/ionic-site#897

MujtabaJ commented 6 years ago

Dear in ionic 3 pager is a boolean type value it is by default is false when you write pager inside ion-slides tag it will be true no need for write yourself

like this

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.