Как перемещать Ion-Slides после каждых 10 секунд в Ionic 4?

Question

Я создаю приложение Ionic 4 plus Angular.В этом я использую Ion-Slides, чтобы показать количество вопросов один за другим.Теперь я хочу перемещать Ion-Slides через каждые 10 секунд.

Документация по Ionic Slides

Answer 1

это ионные 4 объяснения

HTML.

   <ion-slides  [options]="slideOpts"  > 
          <ion-slide *ngFor="let item of cars">
            <img src="{{item}}" width="400px" height="250px">
          </ion-slide>
   </ion-slides>

.ts

import { Component, ViewChild } from '@angular/core';
import {IonSlides} from '@ionic/angular';
export class HomePage {
     @ViewChild(IonSlides) slides: IonSlides;

cars=[
"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Front-Three-Quarter-52645.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Side-52646.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Left-Front-Three-Quarter-52647.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52649.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Rear-view-52650.jpg?v=201711021421&q=80"

];




ngOnInit(){
  this.slides.startAutoplay().then(()=>{})}
}
 slideOpts = {
   speed: 10000
  };

Вы можете получить компонент с помощью ViewChild, а затем использовать его методы при инициализации страницы. startAutoplay() упоминается в связанных документах. Параметры слайдов позволяют установить скорость переходов. Если вы хотите истинное решение, которое переворачивает слайд каждые 10 секунд, вы можете написать асинхронный метод, который меняет слайд каждые 10 секунд. Прокомментируйте, если вам нужна помощь.

Answer 2

вы можете сделать так,

.html

<ion-slides  #slid autoplay="5000" loop="true" speed="500" pager="true"  > 
          <ion-slide *ngFor="let item of cars">
            <img src="{{item}}" width="400px" height="250px">
          </ion-slide>
        </ion-slides>

.ts

import { Component, OnInit, ViewChild } from '@angular/core';

import { Platform } from 'ionic-angular';

import { TabsPage } from '../pages/tabs/tabs';




@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;


cars=[
"https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52648.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Front-Three-Quarter-52645.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Right-Side-52646.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Left-Front-Three-Quarter-52647.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Front-view-52649.jpg?v=201711021421&q=80",
  "https://imgd.aeplcdn.com/1056x594/ec/79/85/9802/img/ol/Lamborghini-Aventador-Rear-view-52650.jpg?v=201711021421&q=80"

];


}

вот ссылка на стек, [https://stackblitz.com/edit/ionic-8qkwca]