SwiperElement loop with autoplay on dynamic content pagination is stuck on last point

[maniya108]

Check that this is really a bug

• I confirm

Reproduction link

https://stackblitz.com/edit/stackblitz-starters-uhn6to?file=src%2Fmain.ts

Bug description

SwiperElement loop with autoplay on dynamic content pagination is stuck on last point.

{
"name": "angular-starter",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build"
},
"dependencies": {
"@angular/animations": "^17.2.0",
"@angular/common": "^17.2.0",
"@angular/compiler": "^17.2.0",
"@angular/core": "^17.2.0",
"@angular/forms": "^17.2.0",
"@angular/platform-browser": "^17.2.0",
"@angular/router": "^17.2.0",
"rxjs": "^7.8.1",
"swiper": "^11.0.7",
"tslib": "^2.5.0",
"zone.js": "~0.14.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.2.0",
"@angular/cli": "^17.2.0",
"@angular/compiler-cli": "^17.2.0",
"typescript": "~5.3.0"
},
"overrides": {
"@angular-devkit/build-angular": {
"piscina": "~4.2.0"
}
}
}

Expected Behavior

SwiperElement loop with autoplay on dynamic content pagination bullets should navigate to correct index

Actual Behavior

SwiperElement loop with autoplay on dynamic content pagination bullets is not working as expected.

Swiper version

11.0.7

Platform/Target and Browser Versions

Angular, Ionic

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[maniya108]

@stonebranch @aub @tomjn @fabrizim any one please help on this issue. This issue is there after swiper v9+ version

[tomjn]

@maniya108 I'm not a contributor to this project and it's not considered polite to ping random committers.

Remember as an open source project development is usually done by volunteered time, most often as a personal hobby. The maintainers may simply be asleep in another timezone or busy with real life so give it a bit longer than an hour and don't depend on an issue on a 3rd party github if it's urgent.

[tomjn]

The stackblitz example does reproduce the issue for me, but I don't know the cause, I'm not familiar enough with Angular to debug this. I did add a second swiper slide component then remove it and noticed that it started autoplaying though, so it's not consistent. That's about as far as I'm able to go

[maniya108]

@maniya108 I'm not a contributor to this project and it's not considered polite to ping random committers.

Remember as an open source project development is usually done by volunteered time, most often as a personal hobby. The maintainers may simply be asleep in another timezone or busy with real life so give it a bit longer than an hour and don't depend on an issue on a 3rd party github if it's urgent.

Hey @tomjn Happy to see your comments. I am not aware you are volunteered person doing this job as a hobby. I thought you guys are contributor, also I thought surely get some workaround or solution from you guys. If anything you got know please help here. 👍

[tomjn]

Actually I had an issue using it with React and submitted a fix :) The behaviour I saw implied the order was important, e.g. if you set autoplay to false then change it dynamically to true it might start auto-playing, giving clues as to why it's failing to work immediately

[rogeliosandoval]

I'm actually experiencing this same EXACT issue and it's the most frustrating thing ever. Defeats the whole purpose of using a ngFor in Angular. I can't wait until a fix comes to light.

[rogeliosandoval]

@maniya108 I'm not sure if you settled this already but I believe I found a fix. Instead of calling register() after your imports you actually want to place that within the ngAfterViewInit() lifecycle hook like this ngAfterViewInit(): void {register()}. Once you do this your slides should have proper indexing instead of having a value of NaN.

I'm not certain but I think the ngFor directive was being initialized after swiper which needed to be the other way around so that swiper can see the right amount of DOM elements. My bullet points are working perfectly now with the autoplay and loop.

[maniya108]

Hi @rogeliosandoval I am using swiper-container in multiple components through out the application. So, I have added the register() in the main.ts file. As you stated the comments, we cant add register() method in all the components of ngAfterViewInit(): void {register()} as per the documentation. If you also using the swiper-container in multiple places please share your code for the reference.

[ZhipengZeng]

Any suggestions on this issue? As I understand, it's a compatible issue between swiper 11 and Angular.