Ionic 2 slider is undefinded and options dont work


#1

Hi,

i have a huge problem with my ionic 2 slider (ion-slide).

At first my code :slight_smile:

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); // undefinded

      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>

My Problem

The ion slider dont take the _options and โ€œ@ViewChild(โ€˜mySliderโ€™) mySlider:Slides;โ€ is also undefinded.

Iam sitting here for 1 hour and try to solve that but i cant see any problems there.

Does someome have a idea why this dont work?

Thanks a lot!