mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
feat(slides): add method to get previous index
Slides added method wrapper: `getPreviousIndex()` references #5508
This commit is contained in:
@ -827,6 +827,15 @@ export class Slides extends Ion {
|
||||
return this.slider.activeIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the index of the previous slide.
|
||||
*
|
||||
* @returns {number} The index number of the previous slide.
|
||||
*/
|
||||
getPreviousIndex(): number {
|
||||
return this.slider.previousIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the total number of slides.
|
||||
*
|
||||
|
1
ionic/components/slides/swiper-widget.d.ts
vendored
1
ionic/components/slides/swiper-widget.d.ts
vendored
@ -3,6 +3,7 @@ export declare class Swiper {
|
||||
constructor(container: HTMLElement, params: any);
|
||||
slides: Array<HTMLElement>;
|
||||
activeIndex: number;
|
||||
previousIndex: number;
|
||||
isEnd: boolean;
|
||||
isBeginning: boolean;
|
||||
update(): any;
|
||||
|
@ -9,7 +9,7 @@ class MyPage {
|
||||
@ViewChild('mySlider') slider: Slides;
|
||||
mySlideOptions = {
|
||||
initialSlide: 1,
|
||||
loop: true
|
||||
loop: false
|
||||
};
|
||||
|
||||
ngAfterViewInit() {
|
||||
@ -17,8 +17,9 @@ class MyPage {
|
||||
}
|
||||
|
||||
onSlideChanged() {
|
||||
let previousIndex = this.slider.getPreviousIndex();
|
||||
let currentIndex = this.slider.getActiveIndex();
|
||||
console.log("Current index is", currentIndex);
|
||||
console.log("Previous index is", previousIndex, "Current index is", currentIndex);
|
||||
}
|
||||
|
||||
goToPrevSlide() {
|
||||
@ -30,7 +31,7 @@ class MyPage {
|
||||
}
|
||||
|
||||
goToSlide(index) {
|
||||
this.slider.slideTo(index, 500, false);
|
||||
this.slider.slideTo(index);
|
||||
}
|
||||
|
||||
getIndex() {
|
||||
|
@ -1,16 +1,23 @@
|
||||
<ion-slides #mySlider [options]="mySlideOptions" (didChange)="onSlideChanged()">
|
||||
<ion-slide padding>
|
||||
<h1>Slide 1</h1>
|
||||
<button block (click)="goToPrevSlide()">Navigate Back</button>
|
||||
<button block (click)="goToNextSlide()">Navigate Forward</button>
|
||||
<button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
|
||||
<button block (click)="getLength()">Get Slide Length</button>
|
||||
<button block (click)="getIndex()">Get Index</button>
|
||||
</ion-slide>
|
||||
<ion-slide padding>
|
||||
<h1>Slide 2</h1>
|
||||
<button block (click)="goToPrevSlide()">Navigate Back</button>
|
||||
<button block (click)="goToNextSlide()">Navigate Forward</button>
|
||||
<button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
|
||||
<button block (click)="getIndex()">Get Index</button>
|
||||
</ion-slide>
|
||||
<ion-slide padding>
|
||||
<h1>Slide 3</h1>
|
||||
<button block (click)="goToPrevSlide()">Navigate Back</button>
|
||||
<button block (click)="goToNextSlide()">Navigate Forward</button>
|
||||
<button block (click)="getIndex()">Get Index</button>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
|
Reference in New Issue
Block a user