Creating a Carousel Header Element

Hi there,
I´d like to create a Carousel Header Element which appears only on one page. Actually it should be an easy job :)
I have the following possibilities:
1. I disabled the image we added as a hook-Element for all other pages and created the carousel in Elementor. One way to do this is to add a carousel. Does not look bad, it is full screen width, it has the texts we want to have on the image, but I am not fully satisfied with it, because this element sticks on the page, although the option sticky is turned off. The slider should disappear under the navigation when I scroll down. Another way is to add an element and set the background up as a slide show. In this case I do not get the complete width of the screen and I can not add a different text to the slides, but it disappears when I scroll down :D
2. For another option I found these scripts: https://www.w3schools.com/howto/howto_js_slideshow.asp
I thought of using Elements and create a hook where I add the HTML, I added the CSS to the Child Theme CSS and got stuck at adding the javascript. This way might or might not work. At least I could define that this hook element appears only on one page and I can add and customize text as I wish.
The questions are: how should I add the javascript to test if the element-solution works.
Any other suggestions about getting the wishes result of a slideshow with three images and texts on them (without placing the text on the image) that if full screen width and disappers unter the header&navigation when scrolled down?

*Please add the sites to the URL:
studio-carousel-as-a-background/ - carousel in Elementor as background slideshow
studio/ - carousel in Elementor as slideshow-element - as far the best looking one - maybe it only needs some lines of css not to stick on any device?
elementor-12401/ - element and css added, javascript missing

Thanks.