In the loop, we declare the variables $first_image and $second_image and assign values, in this case the value of the variables are image references. For a block with the .slide-item class, we set the background-image and pass in the value of the $first_image variable.

Attention question:

How to correctly pass the value of the $first_image variable to the afterChange and $second_image in beforeChange , where we specify the css background-image property?

 <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 example

 $("#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')"); });

    1 answer 1

    If you understand the question correctly, then insert them into the code on the page.

      $("#slider").on("afterChange", function(event, slick, currentSlide, nextSlide){ setTimeout(function() { $('.slide-item').css("background-image","url('<? echo $first_image ?>')"); }, 5000); }); $("#slider").on("beforeChange", function(event, slick, currentSlide, nextSlide){ $(".slide-item").css("background-image","url('<? echo $second_image ?>')"); });
    • if I insert this JS into the #slider block, then slick will add it as a slider element, and if I move it out of the block, then the values ​​of the variables will be empty - eugene_v
    • rather, the values ​​of the last slide will be in the variables - eugene_v