Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

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

BERI KOMENTAR

Maaf untuk sementara waktu komentar di blog ini di nonaftifkan.

 

Back to Top