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.