Передача данных из атрибутов тип [data-] при смене слайда (Slick Slider)?

Question

[krysestark]

Приветствую!

В общем вопрос достаточно сложный (для меня в частности)...
Пытаюсь решить задачу:

1. Есть слайдер Slick Slider
2. Во круг него есть три блока (которые находятся за пределами блока слайдера):

• Шапка (с картинкой бэкграундом)
  
• Боковой блок с счетчиком слайдов и блок с вопросом
  

Вот собственно смысл такой, что у СликСлайдера есть определенные переменные которые можно использовать и передавать куда угодно, например счетчик количества слайдов, с этим проблем не возникло, его я запилил и он выводится за пределами блока слайда в том месте где мне надо.

А вот с другими делами труднее, допустим картинку чтобы передать надо для начала её как то записать, вот я и подумал, чтобы бы не плохо запомнить её допустим в дополнительном атрибуте [data-], но дальше я видимо чет не так делаю, потому как вытащить её из текущего слайда, записать в переменную и передать дальше туда куда мне надо, не получается!

Вот собственно вопрос, как это сделать?

Вот код слайдера с назначением переменных:

$(window).on("load", function () {
    //бла бла бла много другого кода, не имеет отношения
    var $slider = $('.selecter__slider');
    var $progressBar = $('.slider__progress');
    var $progressBarLabel = $( '.slider__label' );
    var $slideCountNum = $( '.selecter__brokerName_num' );
    var $slideCountTotal = $( '.selecter__brokerName_total' );

    var $selecterImg = $( '.selecter__img' ); //место куда надо записать URL картинки в ввиде бекграунда

    $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        var firstslide = nextSlide + 1;

        var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;

        $progressBar
          .css('background-size', calc + '% 100%')
          .attr('aria-valuenow', calc );

        $progressBarLabel.text( calc + '%' );

        $slideCountNum.text( firstslide );
        $slideCountTotal.text( slick.slideCount );

        /*var sliderItemBg = $(this).currentSlide.data('bg');
        $selecterImg.css('background-image', '("'sliderItemBg')"');*/

    });

    $slider.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        dots: false,
        adaptiveHeight: false,
        fade: true,
        cssEase: 'linear',

        nextArrow: '<button type="button" class="btn btn-primary">next</button>',
        prevArrow: '<button type="button" class="btn btn-primary">prev</button>'
    });
    //бла бла бла много другого кода, не имеет отношения
});