Как сделать полноэкранный слайдер с кнопками навигации внутри контейнера поверх слайда?

Question

[Dymok]

Нужно реализовать подобный слайдер:

screenshot

На данный момент есть это: https://codepen.io/UnluckySerivelha/pen/gKVqOQ
Вопрос состоит в том, как поместить кнопки навигации в т.н. контейнер, ограниченный по ширине.
Знаю, что можно картинке задать абсолютное позиционирование, но в таком случае контейнеру придётся задавать фиксированную высоту, чего делать не хотелось бы.
Заранее спасибо.

Answer 1

[Dymok]

Решил небольшим костылём:
https://codepen.io/UnluckySerivelha/pen/gKVqOQ

Answer 2

[Ihor Bratukh]

Вместо абсолютно позиционированных картинок, сделайте абсолютными кнопки навигации, справа и слева, все.
codepen

.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;
}

Comments

[Dymok]

Так мне нужно чтобы они находились не у краёв экрана, а у краёв контейнера ограниченной ширины, как на этом скрине:

[Ihor Bratukh]

Dymok, ну так задайте эти отступы классам .slick-prev и .slick-next, в чем проблема?

.slick-prev {
  left: 30px;
}

.slick-next {
  right: 30px;
}

[Ihor Bratukh]

Dymok, Вы можете сами создать свои кнопки навигации и прописать их логику, изучите документацию slick.

<button class="prev">PREV</button>
<button class="next">NEXT</button>

var $slick = $('.slider__slick-container').slick({
  arrows: false
});

$('.prev').on('click', function() {
  $slick.slick('slickPrev');
});

$('.next').on('click', function() {
  $slick.slick('slickNext');
});

[Dymok]

BRAGA96, нет, мне нужно было по другому. Уже решил сам - https://codepen.io/UnluckySerivelha/pen/gKVqOQ
За помощь спасибо.