Передать значение переменной из PHP в JS

В цикле мы объявляем переменные $first_image и $second_image и присваиваем значения, в данном случае значением переменных являются ссылки на изображения. Для блока с классом .slide-item мы задаем background-image и передаем туда значение переменной $first_image.

Внимание вопрос:

Как правильно передать значение переменной $first_image в событие afterChange и $second_image в beforeChange, где мы указываем css свойства background-image?

<div id="slider">
<?php
    $args = array(
        'post_type' => 'slider',
        'posts_per_page' => -1,
        'orderby' => 'name'
    );
    $query = new WP_Query( $args );
    while ( $query->have_posts() ) { $query->the_post();
        $first_image = get_field( '1st_image');
        $second_image = get_field( '2nd_image');
?>
    <div class="slide-item" style="background-image:url('<?php echo $first_image; ?>')"></div>
<?php } ?>
<?php wp_reset_postdata(); ?>
</div>

Пример JS

$("#slider").slick({
  dots: true,
  arrows: true,
  autoplay: true,
  autoplaySpeed: 10000,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1
});
$("#slider").on("afterChange", function(event, slick, currentSlide, nextSlide){
  setTimeout(function() {
    $('.slide-item').css("background-image","url('https://dummyimage.com/1920x900/ccc/fff.jpg')");
  }, 5000);
});
$("#slider").on("beforeChange", function(event, slick, currentSlide, nextSlide){
$(".slide-item").css("background-image","url('https://dummyimage.com/1920x900/555/fff.jpg')");
});