Ankhena

Slick - устарел.
Он не поддерживает флекс для слайдов.
А это значит, что внутри слайда нужно сделать обертку и задать ей flex.

Если открыть инструменты разработчика, то можно увидеть display у кадров. (И много чего ещё полезного)

Альтернатива: перестать оборачивать картинки в 4 в один слайд, а сделать каждую отдельным слайдом и сказать, что нужно выводить по 4 за раз.

prevArrow: '<button type="button" class="prev">кнопка</button>',
nextArrow: '<button type="button" class="next">другая</button>',

Так: https://jsfiddle.net/6qxkor0b/

Если вы инициализируете слик на .slider, то слайдами становятся его дочерние элементы, т.е. header-slider будет первым кадром, а slider-bg вторым.
Нужно разобраться со структурой.

Есть еще вопросы по коду:

1. Если какая-то картинка -bg, то почему она контентный img, а не фон в css?
И почему у фона z-index больше чем у всего остального.
Поправить бы логику.

2. Зачем картинкам в слайдере абсолют?

Оформите песочницу с видимой проблемой, чтобы было понятно что на самом деле происходит у вас в коде, а не предположения.

Отдельный блок с абсолютным позиционированием.

<div class="block">
  <div class="slider"></div>
  <div class="text"></div>
</div>

Центрирование:

position: absolute;
  top: 50%;
  transform: translateY(-50%);

Сделать: border-radius: 50% и полупрозрачный серый фон, уголок - svg'шка