ionic2 ion-slides option not working as expected

[davyzhang]

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

slideOptions:any ={direction:'vertical',paginationType: 'fraction' };

only direction works ,but paginationType is not working

What behavior are you expecting?

Steps to reproduce:

here is the pen
http://codepen.io/anon/pen/MyvRRr

insert any relevant code between the above and below backticks

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x
2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.1.0 (cordova-lib@undefined)
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.23
Ionic App Lib Version: 2.0.0-beta.13
ios-deploy version: 1.8.5
ios-sim version: 5.0.3
OS: Mac OS X El Capitan
Node Version: v4.2.1
Xcode version: Xcode 7.2 Build version 7C68

[brandyscarney]

Thanks for the issue! We're planning on improving the slides as part of the next beta, so this will be worked on soon. 😄

See #5508, #5491, #5039, #5571, and #5820

[adamdbradley]

Swiper needs to be updated to the latest version, which we will do when we move it to an external module: #6198

[brandyscarney]

Moving to beta.6 to fix with #6198

[brandyscarney]

Thanks for the issue. Slides have been refactored and these should both be working. Please see the docs for usage: http://ionicframework.com/docs/v2/api/components/slides/Slides/#input-properties

[OlivierCadoz]

Hi !
I got this same issue: "paginationType" doesn't work.

I declared an object sliderOptions = {pager: true, loop: true, paginationType: 'fraction'} and declared in my html: <ion-slides [options]="sliderOptions" #newsSlider>. Any other attribute like pager or loop works fine but my pagination is still the same - bullets.

May you drive me somewhere I could find a solution please?

[okonon]

@brandyscarney it appears that the code below still is not honoring paginationType's values:

<ion-slides [pager]="true" [paginationType]="progress">
    <ion-slide>
      <ion-card>
        <ion-card-header>
          iOS 9 and above Requirements
        </ion-card-header>
        <ion-card-content>
          <h2>Test</h2>
          <dynamic-html [data]="app.description"></dynamic-html>
        </ion-card-content>
      </ion-card>
    </ion-slide>
    <ion-slide >
      <img [src]="app.appphoto1">
    </ion-slide>
    <ion-slide>
      <img [src]="app.appphoto2">
    </ion-slide>
    <ion-slide >
      <img [src]="app.appphoto3">
    </ion-slide>
    <ion-slide >
      <img [src]="app.appphoto4">
    </ion-slide>
    <ion-slide >
      <img [src]="app.appphoto5">
    </ion-slide>
    <ion-slide >
      <img [src]="app.appphoto6">
    </ion-slide>
  </ion-slides>

Ionic info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.3.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[brandyscarney]

@okonon When you wrap paginationType in brackets [] you are telling it to evaluate progress as an expression. So this:

[paginationType]="progress"

is looking for a variable called progress to grab the value from. It needs to be written the following way:

paginationType="progress"

It works for [pager]="true" since true is a valid expression, but you could also write it like pager="true".

More information on property binding can be found here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

Thanks! :)

[ionitron-bot]

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.