The ion slide options are out of date, now what?

I am trying to implement Ionic2 Slides , but I cannot find how to set the settings:

ion slides "options" are out of date. Use the ion slide input properties instead.

I can find “input properties” (for example, auto play, speed, direction), but I don’t know where to place it. Every example that I find has [options]="slideOptions"where slideOptionsis the settings, but this does not mean that the other value does not apply to the deprecated notification.

I am new to ionic v2 and typescript, I could get a hacker solution to work, but I want to do it right.


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 a 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
    }
}
+4
2

. , (2.0) , , html. :

<ion-slides pager loop autoplay="2000">
 <ion-slide> ... </ion-slide>
</ion-slides>

, , HTML.

<ion-slides #slides> 
   ...
</ion-slides>

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;
   }
}

, ngAfterViewInit , html <ion-slides #slides>

+5

, html ion-slides, - html. :

<ion-slides [autoplay]="num">
    <ion-slide *ngFor="let item of items">
        <img width="20%"src="{{item.thumb.source}}">
    </ion-slide>
</ion-slides>

num .

0

Source: https://habr.com/ru/post/1668595/


All Articles