Bug: Card Carousel - Leftmost Card Not Visible

[esthersoftwaredev]

Describe the bug

One of the cards in the carousel remains non-visible. The leftmost card (card 1) is not positioned correctly when hidden. Both card 1 and card 5 get the hidden class; however, instead of moving to the left, the first instance of hidden is positioned where the second hidden card is. This causes an incorrect layout.

Steps to reproduce

1. Rin the project locally or visit the site.
2. Go to the homepage where the carousel is implemented.
3. Click on the next/previous buttons to navigate through the carousel.
4. Observe the behavior: - The transition when clicking next works correctly.
   • The transition when clicking previous does not mirror the behavior in reverse.
   • The leftmost card does not move left properly.

Investigate the Issue

• Check how the hidden class is applied to the cards.
• Verify if CSS transforms or transitions are misaligning the first hidden card.
• Ensure the previous button transitions mirror the next button's behavior but in the opposite direction.
• Debug how card positions are updated when navigating backwards.

Resources

• Angular Animations
• CSS Transforms & Transitions
• Angular Debugging Techniques

Browsers

Chrome

Additional context (Is this in dev or production?)

No response

I would be willing to submit a PR to fix this issue

• Yes and I have read the Contribution Guide and I agree to follow this project's Code of Conduct
• No

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.