Having a major issue with my Ionic 2 slider (ion-slide).
Here is my code:
Typescript:
import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Slides } from 'ionic-angular';
@Component({
templateUrl: 'page.html'
})
export class WorkoutStartPage {
@ViewChild('mySlider') mySlider:Slides;
public itemList: Array<any>;
public _options: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public appData: AppData) {
console.log(this.mySlider); // undefined
this._options = {
slidesPerView:2.5,
pager: false,
speed: 800,
autoplay: 5000,
effect: 'fade',
fade: {
crossFade: true
},
loop: 'true',
autoplayDisableOnInteraction: false
}
}
ionViewDidLoad() {
this.appData.getItems().then((items:Array<any>) => {
this.itemList = items;
});
}
}
My template:
<ion-content id="page-workout-start">
<div class="c-headline c-headline--has-padding animated fadeIn">Title</div>
<div *ngIf="itemList">
<ion-slides class="c-item-list-slider animated fadeIn" [options]="_options" mySlider>
<ion-slide *ngFor="let item of itemList">
<div class="header-with-background">
<img src="{{item.image}}">
<div class="img-overlay animated fadeIn">
<h1 [innerHTML]="item.title"></h1>
</div>
</div>
<p>{{item.infos}}</p>
</ion-slide>
</ion-slides>
</div>
</ion-content>
The Issue
The ion slider is not taking the _options and "
@ViewChild('mySlider') mySlider:Slides;Any idea why this might not be working?
Thank you!