How to make a full screen slider with navigation buttons inside a container on top of the slide?

Question

css

You need to implement a slider like this:

screenshot

At the moment there is this: https://codepen.io/UnluckySerivelha/pen/gKVqOQ
The question is how to put the navigation buttons in the so-called. container limited in width.
I know that you can set the image to absolute positioning, but in this case, the container will have to set a fixed height, which I would not want to do.
Thanks in advance.

Answer 1

Instead of absolutely positioned pictures, make the navigation buttons absolute, right and left, that's it.
code pen

.slider {
  padding: relative;
}

.slider img {
  display: block;
  width: 100%;
  height: 100%;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}