Ionic3 multiple swiper sliders on the same page
I am using ionic 3 when placing 3 swiper sliders on the same page. I cannot control their behavior separately. I'm a bit new to angular js and ts and ionic
here is the code
<ion-slides style="height: 30%;" pager>
<ion-slide style="background-color: green" *ngFor="let post of posts">
<h1>{{post.title}}</h1>
<img [src]="post.image" />
</ion-slide>
</ion-slides>
<ion-slides style="height: 30%;" pager>
<ion-slide style="background-color: green" *ngFor="let post of posts">
<h1>{{post.title}}</h1>
<img [src]="post.image" />
</ion-slide>
</ion-slides>
ts
@ViewChild(Slides) slides: Slides;
goToSlide() {
this.slides.slideTo(2, 500);
}
ngAfterViewInit() {
//this.slides.freeMode = true;
this.slides .slidesPerView=3,
this.slides.spaceBetween=5;
//this.slides.loop=true;
}
+3
source to share
1 answer
Instead, ViewChild
you can use ViewChildren
to get all slider instances on this page ( Angular docs ). Please take a look at this working plunker . The end result will be something like this:
As you can see in the plunker, we get all the slider instances, and then we just get the target instance using its index:
import { Component, ViewChildren, QueryList } from '@angular/core';
import { NavController, Content, Slides } from 'ionic-angular';
@Component({...})
export class HomePage {
@ViewChildren(Slides) slides: QueryList<Slides>;
constructor() {}
public move(index: number): void {
this.slides.toArray()[index].slideNext(500);
}
}
Then in the view:
<ion-header>
<ion-navbar>
<ion-title>Ionic Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-slides style="height: 75px" pager>
<ion-slide><h1>Slide 1</h1></ion-slide>
<ion-slide><h1>Slide 2</h1></ion-slide>
<ion-slide><h1>Slide 3</h1></ion-slide>
</ion-slides>
<ion-row>
<ion-col>
<button (click)="move(0)" ion-button text-only>Move First</button>
</ion-col>
<ion-col>
<button (click)="move(1)" ion-button text-only>Move Second</button>
</ion-col>
<ion-col>
<button (click)="move(2)" ion-button text-only>Move Third</button>
</ion-col>
</ion-row>
</ion-content>
+4
source to share