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

Adrian González · Accepted Answer · 2023-07-04T18:07:06.573

2

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.

edited Jul 04 '23 at 18:07

answered Jul 04 '23 at 17:49

Adrian González

58
8

1

Nice, thx a lot. This is exactly what I've been searching for. I'm just wondering though, when I do interact with the swiper with the drag option, the autoplayTimeLeft does not work anymore. Do you have any idea on the reason why ? – Raphaël Balet Jul 05 '23 at 06:26
Yes, you should set false the disableOnInteraction property on the autoplay options: `const options: SwiperOptions = {..., autoplay: {..., disableOnInteraction: false }} ` – Adrian González Jul 05 '23 at 19:48
1

Thx, I saw that possibility. but it disable way to many things, so I came with my custom method. But yours is surely the best (if swiper didn't had a bug '^^) so I'll keep it as accepted answer, thx – Raphaël Balet Jul 05 '23 at 20:00

score 0 · Answer 2 · answered Jul 05 '23 at 12:17

As I show in the image in my question, I've needed to know the active index for me to be able to show the white line with css.

The autoplay feature have sadly a little bug and it is impossible to get the correct swiper.activeIndex since it does never reset to 0.

I had to implement a custom feature and wished to share it with you.

percentage:number = 0
activeIndex = 0
defaultDelay = 500
slides = ['1', '2', '3']

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
  
  // Custom Autoplay Time
  this.doAutoplay(this.defaultDelay, this.activeIndex)

  // If the user manually change the slide
  this.swiper.on('slideChange', (swiper: Swiper) => {
    this.activeIndex = swiper.activeIndex
    this.doAutoplay(this.defaultDelay, this.activeIndex)
  })
}


doAutoplay(delay: number, index: number) {
  if (this.activeIndex !== index) return

  this.percentage = 100 - (delay / this.defaultDelay) * 100 + '%'

  if (delay <= 0) {
    setTimeout(() => {
      if (this.activeIndex + 1 === this.slides.length) this.swiper.slideTo(0)
      else this.swiper.slideTo(this.activeIndex + 1)
    }, 300)
    return
  }

  setTimeout(() => {
    this.doAutoplay(delay - 10, index)
  }, 10)
}

How to get swiper autoplayTimeLeft in Angular

2 Answers2