Responsive Full Screen Slider

Hello everyone,

for a new website i would like to have a full screen slider that appears on my landingpage.
It should be responsive and should have horizontal automatic scrolling (in all sizes).
The hero slider (includes: headlines & footer) should stay on top in all sizes and should stay in place.

Now the problem: right now the slider only works well in normal size screens, but as soon as it reaches the screen of an iPad, the pictures (there a two photo sizes: one for the bigger screens (image: no class) and one just for the mobile screens (class: image_mobile)) are getting cropped and the slider arrows are moving and won’t stay in the center of the slider.
*The photos right now are just for testing.

How can i fix this Problem?
Solutions without Code and as well with Code are welcome.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)