Hi,
We try to use ion-slides nested in other ion-slides with pager option on child but we have trouble with this.
The child ion-slides isn’t init correctly with pager and step navigation on the two first loaded parent slide, but if we scroll that two slide on parent, next slide child work correctly.
HTML :
<ion-slides [hidden]="zoomed" #slides (ionSlideNextStart)="getNext()" (ionSlidePrevStart)="getPrevious()" [options]="sliderOptions">
<ion-slide *ngFor="let c of colors">
<div class="color">
<div class="sample background" [style.background]="'url('+ c.images.full +')'">
<h1>{{c.name}}</h1>
</div>
<div [hidden]="!isInfo" class="description" *ngIf="c">
<div class="header">
<p>Lorem</p>
<h2>{{ c.name }}</h2>
<p>{{ c.description }}</p>
</div>
<div class="body">
<div class="row">
<span (click)="getPrevious2()"></span>
<div class="sub-title">{{ c.supportsLength }} Lorem Ipsum</div>
<span (click)="getNext2()"></span>
</div>
<ion-slides class="childSlides" #slides2 (ionSlideTouchStart)="freezeParentSlides()" (ionSlideDidChange)="unfreezeParentSlides()" (ionSlideNextStart)="getNext2()" (ionSlidePrevStart)="getPrevious2()" pager="true" [options]="{nested:true,slidesPerView:1}">
<ion-slide *ngIf="c.supports.wall">
<div class="fixation-schema">
<div>
<i class="schema-panneau"></i>
<div>LOREM</div>
</div>
<p class="sub-title">LOREM IPSUM</p>
<ul><li *ngFor="let d of c.supports.wall">{{ d }}</li></ul>
</div>
</ion-slide>
<ion-slide *ngIf="c.supports.bati">
<div class="fixation-schema">
<div>
<i class="schema-wc"></i>
<div>LOREM</div>
</div>
<p class="sub-title">LOREM IPSUM</p>
<ul><li *ngFor="let d of c.supports.bati">{{ d }}</li></ul>
</div>
</ion-slide>
<ion-slide *ngIf="c.supports.bath">
<div class="fixation-schema">
<div>
<i class="schema-baignoire"></i>
<div>LOREM</div>
</div>
<p class="sub-title">LOREM IPSUM</p>
<ul><li *ngFor="let d of c.supports.bath">{{ d }}</li></ul>
</div>
</ion-slide>
<ion-slide *ngIf="c.supports.credenza">
<div class="fixation-schema">
<div>
<i class="schema-credence"></i>
<div>LOREM</div>
</div>
<p class="sub-title">LOREM IPSUM</p>
<ul><li *ngFor="let d of c.supports.credenza">{{ d }}</li></ul>
</div>
</ion-slide>
<ion-slide *ngIf="c.supports.niche">
<div class="fixation-schema">
<div>
<i class="schema-niche"></i>
<div>LOREM</div>
</div>
<p class="sub-title">LOREM IPSUM</p>
<ul><li *ngFor="let d of c.supports.niche">{{ d }}</li></ul>
</div>
</ion-slide>
<ion-slide *ngIf="c.supports.pipe">
<div class="fixation-schema">
<div>
<i class="schema-tuyau"></i>
<div>LOREM</div>
</div>
<p class="sub-title">LOREM IPSUM</p>
<ul><li *ngFor="let d of c.supports.pipe">{{ d }}</li></ul>
</div>
</ion-slide>
</ion-slides>
</div>
</div>
</div>
</ion-slide>
</ion-slides>
Component :
import { ViewChild, Component } from '@angular/core';
import { ColorsService } from '../services/colors.service';
import { FamiliesService } from '../services/families.service';
import { NavController, IonSlides} from '@ionic/angular';
import { Plugins } from '@capacitor/core';
@Component({
selector: 'app-color',
templateUrl: './color.page.html',
styleUrls: ['./color.page.scss'],
})
export class ColorPage {
@ViewChild('slides2', {static: false}) slides2: IonSlides;
@ViewChild('slides', {static: false}) slides: IonSlides;
private iteration;
private limit;
private activate = false;
public colors;
public family;
public current;
public isInfo = false;
public zoomed = false;
public sliderOptions = { loop: true, initialSlide: 1 };
constructor( private colorsService: ColorsService, private familiesService: FamiliesService )
{
let params = this.colorsService.currentColor;
this.current = this.colorsService.getColorById(params.id).images.full;
this.family = this.familiesService.getFamilyByLabel(params.family);
this.iteration = params.iteration
this.limit = this.family.colors.length-1;
let prev;
if ( this.iteration == 0 ) {
let temp = this.familiesService.getPreviousFamily(this.family.id).colors
prev = temp[temp.length-1];
} else {
prev = this.colorsService.getPreviousColor(params.id, this.family.colors);
}
let next;
if ( this.iteration == this.family.colors.length-1 ) {
next = this.familiesService.getNextFamily(this.family.id).colors[0];
} else {
next = this.colorsService.getNextColor(params.id, this.family.colors);
}
this.colors = [
prev,
this.colorsService.getColorById(params.id),
next
].map(c => {
c.supportsLength = Object.keys(c.supports).length;
return c;
});
console.log(this.slides, this.slides2);
}
freezeParentSlides()
{
this.activate = false
console.log('Child freeze Parent')
}
unfreezeParentSlides()
{
this.activate = true
console.log('Child unfreeze Parent')
}
getNext2() { console.log('Child call his next method') }
getPrevious2() { console.log('Child call his previous method') }
getNext()
{
if ( this.activate ) {
console.log('Parent call his next method')
let next;
// Before change family
if ( this.iteration == this.limit-1 ) {
next = this.familiesService.getNextFamily(this.family.id).colors[0];
// Changing family
} else if ( this.iteration == this.limit ) {
this.iteration = -1;
this.family = this.familiesService.getNextFamily(this.family.id);
next = this.family.colors[1];
this.limit = this.family.colors.length-1;
// Regular
} else if ( this.iteration < this.limit ) {
next = this.colorsService.getNextColor(this.colors[2].id, this.family.colors);
}
this.iteration++;
this.colors.push(next);
this.colors.shift(this.colors[0]);
this.colors.forEach(c => {
if (typeof c.supportsLength !== 'number') {
c.supportsLength = Object.keys(c.supports).length;
}
});
this.current = this.colors[1].images.full;
this.slides.slideTo(2, 0, false);
} else {
this.activate = true;
}
}
getPrevious()
{
if ( this.activate ) {
console.log('Parent call his previous method')
let previous;
// Before change family
if ( this.iteration == 1 ) {
let prevFam = this.familiesService.getPreviousFamily(this.family.id)
previous = prevFam.colors[prevFam.colors.length-1];
// Changing family
} else if ( this.iteration == 0) {
this.family = this.familiesService.getPreviousFamily(this.family.id);
this.limit = this.family.colors.length-1;
previous = this.family.colors[this.limit-1];
if ( this.iteration == 0 ) {
this.colors[0] = this.family.colors[this.limit]
}
this.iteration = this.limit+1;
// Regular
} else if (this.iteration > 1) {
previous = this.colorsService.getPreviousColor(this.colors[0].id, this.family.colors);
}
this.iteration--;
this.colors.unshift(previous);
this.colors.pop(2);
this.colors.forEach(c => {
if (typeof c.supportsLength !== 'number') {
c.supportsLength = Object.keys(c.supports).length;
}
});
this.current = this.colors[1].images.full;
this.slides.slideTo(2, 0, false);
} else {
this.activate = true;
}
}
}
You can see trouble in action here :
Someone have an idea to fix this please ?