How to add titles to the slider near the arrows?

Question

Slick

That is, when scrolling, the headings change

https://codepen.io/Olya097/pen/XWWPKaq

Answer 1

Pseudo elements can be used:

.slider::before,
.slider::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 666;
}

.slider::before {
  left: 0;
  content: attr(data-prev);
}

.slider::after {
  right: 0;
  content: attr(data-next);
}

$sliderElement.on('init afterChange', function(e, { $slider }) {
  const $active = $slider.find('.slick-active');

  $slider.attr({
    'data-prev': `prev: ${$active.prev().text() || 'какой-то дефолтный текст'}`,
    'data-next': `next: ${$active.next().text() || 'какой-то дефолтный текст'}`,
  });
})

https://jsfiddle.net/z58bvgxr/