How to get swiper autoplayTimeLeft in Angular

Question

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

Answer 1

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.