Slideshow Sederhana Pada Aplikasi Android Menggunakan Ionic Framework

Langsung saja, berikut langkah-langkahnya:

1. Buat lembar kerja baru berupa template kosong (blank), dengan mengetik pada terminal:

ionic start aplikasiSlides blank

2. Buka berkas home.page.ts di dalam direktori aplikasiSlides/src/app/home, dan pastikan isinya seperti berikut:

import { Component } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  imageContainer = [
    {name: 'slides1', url:"https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg", link:"https://pixabay.com/photos/cat-young-animal-curious-wildcat-2083492/" },
    {name: 'slidess2', url:"https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782_960_720.jpg", link:"https://pixabay.com/photos/cat-animal-cat-portrait-mackerel-1045782/"},
    {name: 'slides3', url:"https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_960_720.jpg", link:"#"}
];
   
slideOpts = {
  loop: true,
  effect: 'slide',
  speed: 100,
  slidesPerView: '1',
  paginationClickable: true,
  showNavButtons: false,
  autoplay: true, 
  autoplayDisableOnInteraction: false
};  
   
  constructor() {}
}

3. Buka berkas home.page.html juga di dalam direktori aplikasiSlides/src/app/home, dan pastikan isinya seperti berikut:

  
 <ion-header>  
  <ion-toolbar>  
   <ion-title>  
    Ionic Blank  
   </ion-title>  
  </ion-toolbar>  
 </ion-header>  
 <ion-content>  
  <div class="ion-padding">  
   <ion-slides *ngIf="imageContainer && imageContainer.length" pager="true" [options]="slideOpts">  
    <ion-slide *ngFor="let image of imageContainer" padding>  
     <a href="{{image.link}}"><img src="{{image.url}}" width="100%" height="426" text-center padding></a>  
    </ion-slide>  
   </ion-slides>  
  </div>  
 </ion-content>    

4. Jalankan, dengan mengetik pada terminal:

ionic serve .

5. Selesai.