I'm trying to implement Ionic2's Slides, but I can't find how to set the settings:
ion-slides "options" has been deprecated. Please use ion-slide's input properties instead.
I can find the 'input properties' (e.g. autoplay, speed, direction), but I don't have a clue where to place this. Every example I find does [options]="slideOptions"
where slideOptions
are the settings, but that results in no result other that the deprecated notice.
I'm new to ionic v2 and typescript, I could probally get a hacky solution to work, but I want to do it right.
The HTML in ion-content
:
<ion-slides [options]="slideOptions">
<ion-slide *ngFor="let item of items">
<img width="20%"src="{{item.thumb.source}}">
</ion-slide>
</ion-slides>
And the simplified class: import { Slides } from 'ionic-angular';
@Component({
selector: 'page-example',
templateUrl: 'example.html'
})
export class Example {
public items: any;
private slideOptions: any;
@ViewChild(Slides) slides: Slides;
constructor(private navCtrl: NavController, public navParams: NavParams) {
this.items = [];
this.albumInfo = navParams.get('item');
this.getSlides();
}
// This does nothing:
goToSlide() {
this.slides.slideTo(2, 500);
}
// This does nothing:
ngAfterViewInit() {
this.slides.autoplay = 2000;
}
// Simple example of getting the slides
makeGetRequest():Promise<string> {
/* Get the items code, populates this.items
}
}
ion-slides have been changed. Make sure you have updated to the latest ionic version (2.0) Input properties listed in the site can be directly used in the html. Eg:
<ion-slides pager loop autoplay="2000">
<ion-slide> ... </ion-slide>
</ion-slides>
To use properties other than those listed in input properties, you can use variable in your HTML.
<ion-slides #slides>
...
</ion-slides>
and use it in TS:
import { Component, ViewChild } from '@angular/core';
import {Slides} from 'ionic-angular'
export class Example {
@ViewChild(Slides) slides: Slides;
constructor() {}
ngAfterViewInit() {
this.slides.autoplay = 2000;
this.slides.autoplayDisableOnInteraction = false;
}
}
In your case, ngAfterViewInit does nothing as you have not defined your variable in your html as <ion-slides #slides>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With