Unable to open routerLink when navigating backwards to last slide of IonSlides component

Ionic Framework Ionic React
1

I have an infinitely looping IonSlides component with 5 slides. Each slide has a IonCard component which contains a routerLink to a different page in my app.

Scrolling through the slides forwards (eg/ thumb goes right to left), everything is fine - all the slides open up the correct link and the looping works correctly.

However, when you scroll backwards (thumb goes left to right) and land on the last card in the coded list (the 5th card - there is no ‘last card’ in an infinite loop) the link no longer opens it just redirects to the home page when it fails. Every other slide can be scrolled to backwards and the link will open correctly. It’s just the last card in the IonSlides component which has this issue.

To verify this I’ve added a blank slide at a 6th slide to my list (so it will be in the last position). Now when scrolling back the 5th card will load the link correctly. Therefore I think there is an issue with the last card of a IonSlides carousel when scrolling backwards.

This issue has me pretty stumped, if anyone has any ideas/fixes I’d love to know, thanks.

1 Like
2

This is definitely a bug, but I have no idea how to solve it.
It happens when you loop from the last slide to the first, or the first to the last.
But, if you go to the second to last, and back to the last slide, the routerLink works again.
FYI, I only have one slide visible at a time in my example.

I sorta solved this by adding an <a href routerLink> tag to all my links. So, if the routerLink doesn’t work, the href takes over, but it reloads the app :man_facepalming:t2:.

It sucks, but it works. Still trying to figure out how to fix this, and it ruins the routerDirection animation too.

I have reported the bug:

PS: This is related to Ion-button not working inside first ion-slide