O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.
ion-slides komponenta sastoji se od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.
Ova se komponenta može koristiti za prikaz uputa prilikom prvog pokretanja mobilne aplikacije, primjer čega se nalazi u dokumentaciji, ali se isto tako pomoću ove komponente može napraviti lijepa galerija slika. Slike se mogu pomicati lijevo-desno, ali ih je isto tako moguće postaviti da se pomiču automatski u određenim intervalima.
S obzirom da ion-slides svoje temelje ima u Swiper.js-u i ondje je moguće pronaći dodatne opcije za upravljanje slajdovima.
Kreiranje aplikacije
|
1 2 3 |
$ ionic start IonicSlidesGallery blank $ cd IonicSlidesGaller $ionic serve |
Struktura ekrana na kojemu ću testirati ion-slides izgleda ovako:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ion-header text-center> <ion-toolbar color="primary"> <ion-title> Ionic 4 Slides </ion-title> </ion-toolbar> </ion-header> <ion-content> //ion-slides će ići ovdje </ion-content> |
Slike se nalaze unutar assets/imgs mape.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { imageContainer = [ {url:"assets/imgs/image1.jpg"}, {url:"assets/imgs/image2.jpg"}, {url:"assets/imgs/image3.jpg"}, {url:"assets/imgs/image4.jpg"} ]; slideOpts = { // }; constructor(){ } } |
Galerija preko cijelog ekrana
U ovom primjeru slike zauzimaju cijeli ekran. Dolaskom do zadnje slike nije moguće ići dalje loop: 'false'.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ion-header text-center> <ion-toolbar color="primary"> <ion-title> Ionic 4 Slides </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-slides pager="true" scrollbar="false" [options]="slideOpts" style="object-fit:cover;height:100%;background-color:#000;"> <ion-slide *ngFor="let image of imageContainer; let i = index"> <img src="{{image.url}}"> </ion-slide> </ion-slides> </ion-content> |
Galerija preko jednog dijela ekrana
U ovom primjeru galerija slika zauzima samo jedan dio ekrana ispod koje se onda vidi ostatak sadržaja. Dolaskom do zadnje slike moguće je ići dalje tj. napraviti puni krug do prve slike pomoću loop: 'true'.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ion-header text-center> <ion-toolbar color="primary"> <ion-title> Ionic 4 Slides </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-slides pager="true" [options]="slideOpts" scrollbar="false" style="background-size:cover;height:58%;background-color:#000;"> <ion-slide *ngFor="let image of imageContainer; let i = index"> <img src="{{image.url}}"> </ion-slide> </ion-slides> <ion-card> <ion-card-header> <ion-card-subtitle>Ionic 4 Slides</ion-card-subtitle> <ion-card-title>Primjer galerije slika</ion-card-title> </ion-card-header> <ion-card-content> <p>O ovom ću blog postu pokazati nekoliko načina na koje je moguće koristiti ion-slides komponentu unutar Ionic 4 aplikacije.</p> <p>ion-slides komponenta sastoji od više zasebnih dijelova. Svaki od tih dijelova je zapravo jedna ion-slide komponenta.</p> </ion-card-content> </ion-card> </ion-content> |
Zaključak
Struktura projekta prema package.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
{ "name": "IonicSlidesGallery", "version": "0.0.1", "author": "Tomislav Stanković", "homepage": "https://www.tomislavstankovic.com/", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "^7.2.2", "@angular/core": "^7.2.2", "@angular/forms": "^7.2.2", "@angular/http": "^7.2.2", "@angular/platform-browser": "^7.2.2", "@angular/platform-browser-dynamic": "^7.2.2", "@angular/router": "^7.2.2", "@ionic-native/core": "^5.0.0", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^4.0.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "zone.js": "~0.8.29" }, "devDependencies": { "@angular-devkit/architect": "~0.12.3", "@angular-devkit/build-angular": "~0.12.3", "@angular-devkit/core": "~7.2.3", "@angular-devkit/schematics": "~7.2.3", "@angular/cli": "~7.2.3", "@angular/compiler": "~7.2.2", "@angular/compiler-cli": "~7.2.2", "@angular/language-service": "~7.2.2", "@ionic/angular-toolkit": "~1.4.0", "@types/node": "~10.12.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.4", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~8.0.0", "tslint": "~5.12.0", "typescript": "~3.1.6" }, "description": "An Ionic 4 Slides project" } |
