Testimonials 7 layout with acf field

1. Add acf field (name, photo, and position). then add this code.

<div class="testimonial-page-wrapper">
	<div class="testimonial-page-slider">

		<?php 
			$args = array(
				'post_type' => 'testimonial',
				'posts_per_page' => -1,
			);

			$testimonial_page = new WP_Query($args);

			if ($testimonial_page->have_posts()) {
				while ($testimonial_page->have_posts()) {
					$testimonial_page->the_post();
				 	$image = get_field('photo');
					?>

						<div class="testimonial-page-slide">
							<div class="testimonial-page-inner">
								<?php
									if ($image) {
									?>
	                                    <img src="<?=esc_url($image['url'])?>" alt="<?=esc_attr(get_the_title())?>">
	                                <?php
	                                } else {
	                                	?>
	                                	<img src="/wp-content/uploads/2024/01/img253px.jpg" alt="testimonial-image">
	                                	<?php
	                                }
	                            ?>
								<div class="testimonial-page-description">
									<?php the_content(); ?>
								</div>
	                            <div class="testimonial-page-details">
	                            	 <p class="testimonial-page-name">
	                                    <strong><?php the_field('name'); ?></strong>
	                                </p>
	                                <p class="testimonial-page-position">
	                                    <?php the_field('position'); ?>
	                                </p>
	                            </div>
	                        </div>
						</div>

					<?php
				}
			}
		?>

	</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">

<style type="text/css">
	.testimonial-page-slide {
	    border: 5px var(--wp--preset--color--primary) solid;
	    border-radius: 5px;
	    
	    text-align: center;
	}

	.testimonial-page-inner {
		padding: 30px;
	}

	.testimonial-page-name {
		font-size: 25px !important;
		margin: 0px;
    	margin-top: 20px;
		font-family: var(--wp--preset--font-family--custom-verdana) !important;
	}

	.testimonial-page-position {
		font-size: 22px !important;
		margin: 0px;
		font-family: var(--wp--preset--font-family--custom-verdana) !important;
	}
	
	.testimonial-page-description p {
		margin: 0px;
    	margin-top: 20px;
		font-family: var(--wp--preset--font-family--custom-verdana) !important;
	}

	 /* the slides */
	.testimonial-page-slider .slick-slide {
		margin-left:40px;
	}

	/* the parent */
	.testimonial-page-slider .slick-list {
		margin-left:-40px;
	}
</style>

<script>
    jQuery(document).ready(function($) {
        // Initialize Slick Slider
        $('.testimonial-page-slider').slick({
			slidesToShow: 2,
			slidesToScroll: 1,
		 	centerPadding: '60px',
			autoplay: true,
			dots: false,
            arrows:false,
			autoplaySpeed: 3000,
			responsive: [
				{
					breakpoint: 600,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1
					}
				}
			]
        });
    });
</script>