ionic-frameworkionic2ion-slides

Ion-slides slidesPerView property


I'm using ion-slides as the following:

<div *ngFor="let category of categories">
    <h6 class="slide-title" [innerHTML]="category.name"></h6>
    <ion-slides [loop]="true" [pager]="true" [slidesPerView]="3">
        <ion-slide *ngFor="let product of category.products">
            <img [src]="product.image" class="slide-image">
        </ion-slide>
    </ion-slides>
</div>

I'm getting the following error:

Unhandled Promise rejection: Template parse errors: Can't bind to 'slidesPerView' since it isn't a known property of 'ion-slides'.

  1. If 'ion-slides' is an Angular component and it has 'slidesPerView' input, then verify that it is part of this module.
  2. If 'ion-slides' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("h6 class="slide-title" [innerHTML]="category.name"> ][slidesPerView]="3">

<img [src]="product"): MainPage@12:43 ; Zone: ; Task: Promise.then ; Value: ....

can anyone help please.

ionic -v 2.2.1

cordova -v 6.5.0


Solution

  • Recently there was some changes in ion-slides. Make sure you have the latest ionic version (2.0.0). Also you can use slidesPerView without enclosing it in square brackets as follows

    <ion-slides pager loop slidesPerView="3">
      <ion-slide>
         ...
      </ion-slide>
    <ion-slides>