Как правильно задать выполнение действия для следующих элементов?

Question

[sadboy]

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

<div class="your-class">
    <?foreach ($arResult['ITEMS'] as $key => $value):?>

        <div>
            <a class="popup" href="#pr_<?=$value['CODE']?>" data-bg="<?=$value['DISPLAY_PROPERTIES']['BACKGROUND']['FILE_VALUE']['SRC']?>">
                <img src="<?=$value['PREVIEW_PICTURE']['SRC']?>" alt="<?=$value['NAME']?>">
            </a>
        </div>

    <?endforeach;?>
</div>

вот код скрипта

function bg(){
  var bg = $('.slick-active').find('.popup').data('bg');
      $(".projects-bg-wrap").css('background-image', 'url(' + bg + ')');
}
bg();

$('.your-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  bg();
  var x = $('.slick-current').next().find('.popup').data('bg');
  $(".projects-bg-wrap").css('background-image', 'url(' + x + ')');
  $('.projects-bg-wrap').removeClass('active');
    setTimeout(function(){
      $('.projects-bg-wrap').addClass('active');
    }, 100);
});

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

п.с. я стажер верстальщик
п.с.с слайдер используется slick-slider
п.с.с.с хелпаните пожалуйста, я уже не знаю что можно еще придумать.
п.с.с.с.с сайт на битриксе, если что

Answer 1

[one_day]

вместо вашей строчки

var x = $('.slick-slide:eq('+nextSlide+')').next().find('.popup').data('bg');

Comments

[sadboy]

поменял строчку и почему-то фото на бекграунде показываются не от нужного слайда, а от предыдущего

[one_day]

https://codepen.io/one_day/pen/oojzbp

Answer 2

[tyzberd]

пробуйте использовать
slick.$slides
nextSlide