Ionic-framework: ionic2 ion-slides option not working as expected

Created on 1 Apr 2016 · 8Comments · Source: ionic-team/ionic-framework

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

Source

davyzhang

Most helpful comment

@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! :)

brandyscarney on 13 Mar 2017

👍3

All 8 comments

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

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

brandyscarney on 1 Apr 2016

👍1

Swiper needs to be updated to the latest version, which we will do when we move it to an external module: https://github.com/driftyco/ionic/issues/6198

adamdbradley on 17 Apr 2016

👍1

Moving to beta.6 to fix with #6198

brandyscarney on 18 Apr 2016

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

brandyscarney on 24 Jan 2017

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: . 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?

OlivierCadoz on 9 Mar 2017

@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

okonon on 11 Mar 2017