Buttons position gets change in custom slider in Angular

Question

I have this custom slider

Working Link : https://stackblitz.com/edit/angular-ivy-rwuxjd?file=src%2Fapp%2Fapp.component.html

Slider is working but Next and previous buttons are not at proper location when we slide it to next or previous slides, Every slide will have different contents and slide height will also change, but issue is when i slide to next or previous then Next and Previous buttons location should be managed automatically but presently when we click on next next while slides are being translated the button moves to top most position. I don't want to fix the button position, It should be managed according to the content height.

Any solution is highly appreciated. Thanks

Answer 1

You need to add some CSS rules for that. Try put a container div around the buttons and the image slider and give it a min-height.

Not perfect but will put you in the right direction.

https://stackblitz.com/edit/angular-ivy-airvm5?file=src/app/app.component.css