CODEWITHSUNDEEP
htmltypescriptangular6ionic4
gaus shaikh
gaus shaikh

Reputation: 145

How to move Ion-Slides next after every 10 second in Ionic 4?

I'm creating Ionic 4 plus Angular app. In that I'm using Ion-Slides to show number of questions one by one. Now I want move Ion-Slides next after every 10 seconds.

Ionic Slides Documentation

Upvotes: 0

Views: 1800

Answers (2)

Ira Watt
Ira Watt

Reputation: 2145

this is the ionic 4 explanation

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

You can grab the component with ViewChild then you can use its methods on page initialisation. startAutoplay() is mentioned in the docs you linked. Slide options allows you to set the speed of transitions. If you want a true solution that flips the slide every 10 seconds you could write an async method which changes the slide every 10 seconds. Comment if you need help.

Upvotes: 2

ArunKumar M N
ArunKumar M N

Reputation: 1266

you can do like this,

.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"

];


}

here is the stackblitz link [https://stackblitz.com/edit/ionic-8qkwca ]

Upvotes: 2

Related Questions