I'd like to create my own pagination, with a bar filling himself while the autoplay is playing
I see that swiper do have an autoplayTimeLeft method, but I cannot figure out how to use it.
This is what I've tried so fare, but the method wont trigger anything.
<swiper-container #swiperRef init="false" (autoplayTimeLeft)="setTimeLeft($event)">
</swiper-container>
I'm instantiating the swiper as follow
You should use it as an event. Then, in the _initSwiper() method, you can do the following:
percentage:number=0;
private _initSwiper() {
const options: SwiperOptions = {...}
const swiperEl = this._swiperRef.nativeElement
Object.assign(swiperEl, options)
swiperEl.initialize()
if (this.swiper) this.swiper.currentBreakpoint = false // Breakpoint fixes
this.swiper = this._swiperRef.nativeElement.swiper
// Autoplay Time Left Event
this.swiper.on('autoplayTimeLeft',(swiper:Swiper, timeLeft:number, percentage:number)=>{
// Here write the code you need
console.log(swiper, timeLeft, percentage);
this.percentage=percentage;
});
}
Here's an example similar to what you want to achieve.