Как добавить заголовки в слайдер возле стрелок?

Question

[olya_097]

Тоесть чтобы при листании заголовки менялись


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

Answer 1

[0xD34F]

Псевдоэлементами можно воспользоваться:

.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/