chack
July 23, 2016, 10:50pm
1
Hey there,
I’m currently trying to develop a fullscreen Slider where I can see the current Slide Index and the length of the Slide itself, so “Picture 3 of 13” is written in the navbar.
HTML template:<ion-header> <ion-toolbar> <ion-title> {{current}} von {{all}} </ion-title> <ion-buttons start> <button (click)="dismiss()"> <span primary showWhen="ios">Abbrechen</span> <ion-icon name="md-close" showWhen="android,windows"></ion-icon> </button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content> <ion-slides #bilderslider [options]="mySlideOptions" > <ion-slide *ngFor="let bild of restbilder"> <img src="{bild.bildpfad}}"> </ion-slide> </ion-slides> </ion-content>
Typescript:import {Component, ViewChild, AfterViewInit} from '@angular/core'; import {NavController, NavParams, Slides,ViewController} from 'ionic-angular'; @Component({ templateUrl: 'build/pages/inserat/fullscreen_bilder/fullscreen_bilder.html', }) export class FullScreen { @ViewChild('bilderslider') slider: any; bild1:any; bild2:any; bild3:any; restbilder:any; all:any; current:any; id:any; constructor(public viewCtrl: ViewController,private navController: NavController,private navParams: NavParams) { this.bild1 = navParams.get('bild1'); this.bild2 = navParams.get('bild2'); this.bild3 = navParams.get('bild3'); this.restbilder = navParams.get('restbilder'); this.id = navParams.get('idInserat'); } dismiss() { this.viewCtrl.dismiss(); } mySlideOptions = { loop: true }; ngAfterViewInit() { console.log('on after view init', this.slider); this.current = this.slider.getActiveIndex(); console.log("Current index is", this.current); this.all = this.slider.length(); } }
What’s wrong?
I think ngAfterViewInit is too early, and the slider has not been fully constructed yet. Can you try substituting ionViewDidEnter?
1 Like
chack
July 24, 2016, 9:54am
3
Awesome that worked like a charm!
Problem now:
onSlideChanged() {
this.current=this.slider.getActiveIndex();
}
Only thing I can think of is to wrap that assignment in a check like if (this.slider.slider), so it will only try if the slider is fully built.
Hi There,
I am having a same problem, could you please help me, I didnt understand “wrap that assignment in a check like if…” I tried putting the If condition in onSlideChange with console.log message, which works but when I am trying to get the length or getActiveIndex of slider, i got undefined message error. I am not sure how to resolve this. It works find with ionDrag but doesnt work with other two options. Any help would be appreciated.
Cheers,
I don’t know how else to put it.
if (this.slider.slider) {
// now we know this should work
this.current = this.slider.getActiveIndex();
}
Yeah, I tried with the above approach but the problem still exists. It works fine with ionDrag or if I hard code all the slides
Found the workaround, might not be the right way but it did work for me. I ended up putting the condition in this way
if(this.slider.getSlider()){
}
1 Like
chack
July 31, 2016, 8:35pm
9
Awesome. Worked again!
I maybe found a bug. I got 3 picture variables + an array of pictures:
<ion-slides #bilderslider [options]="mySlideOptions" (ionDidChange)="onSlideChanged()"> <ion-slide *ngIf="bild1"> <img src="file=inseratedata/{{id}}/{{bild1}}"> </ion-slide> <ion-slide *ngIf="bild2"> <img src="file=inseratedata/{{id}}/{{bild2}}"> </ion-slide> <ion-slide *ngIf="bild3"> <img src="file=inseratedata/{{id}}/{{bild3}}"> </ion-slide> <ion-slide *ngFor="let bild of restbilder"> <img src="file=inseratedata/{{id}}/{{bild.bildpfad}}"> </ion-slide> </ion-slides>
The Array has 2 elements, so in sum I’ve should got 5 pictures. The Pager element creates 5 dots, but the slider.length() function returns seven?
That is interesting, it should return 5. Would you be able to share your code ?
