Ionic Framework: Slideshow Sederhana Pada Aplikasi Android

Tampilan slideshow sederhana pada aplikasi Android yang dibangun dengan Ionic Framework.

Tampilan slideshow akan menambah cantik halaman awal pada aplikasi (landing page) Android kita yang dibangun menggunakan Ionic Framework. Di sini saya tidak membahas bagaimana cara instalasi Ionic Framework dan library pendukungnya, silahkan rekan-rekan melakukan googling.

Pada pembuatan slideshow, kita bisa menggunakan library dari Ionic yaitu ion-slides (https://ionicframework.com/docs/api/slides).

Pada saat artikel ini dibuat, saya menggunakan Ionic versi 5.2.4, npm versi 6.9.0 dan nodejs versi 12.13.0.

Langsung saja, berikut langkah-langkahnya:

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

[code]
ionic start aplikasiSlides blank
[/code]

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

[code]
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() {}
}
[/code]

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

[code]  
 <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>  
 [/code]  

4. Jalankan, dengan mengetik pada terminal:

[code]
ionic serve .
[/code]

5. Selesai.

Penulis: Aplikasi dan Jaringan
Chanel Youtube : Simple Tutorial