
Copy and paste this code to the custom block.
<?php
/** Block Name: Testimonial Slider
** Author Name: MonLigan
* */
$args = array(
'post_type' => 'testimonial',
'post_status' => 'publish',
'posts_per_page' => -1,
'order' => 'ASC',
);
?>
<style>
.testimonial_content video{
width: 941px;
height: 461px;
}
/* DOTS */
.testimonial-slider .slick-dots li button {
cursor:pointer;
}
.slick-dots {
display: flex;
justify-content: center;
margin:36px;
padding:0;
list-style-type: none;
}
.slick-dots li {
margin: 0 4px;
}
.slick-dots button {
display: block;
width: 13px;
height: 13px;
padding: 0;
border: none;
border-radius: 100%;
background-color: #FFFFFF;
text-indent: -9999px;
}
.slick-dots li.slick-active button {
background-color: #E01A27;
}
</style>
<div class="slider-container">
<div class="testimonial-slider">
<?php
$loop = new WP_Query( $args );
$count = $loop->found_posts;
while ( $loop->have_posts() ) : $loop->the_post();
$video_testimonial = get_field('video_testimonial');
?>
<div class="testimonial_content">
<?
if( $video_testimonial ): ?>
<video controls>
<source src="<?php echo esc_url( $video_testimonial ); ?>" type="video/mp4">
Your browser does not support the video tag.
</video>
<?php else: ?>
<!-- No video found message -->
<?php endif; ?>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
<script>
jQuery(document).ready(function( $ ){
$('.testimonial-slider').slick({
slidesToShow: 1,
slidesToScroll:1,
autoplay: false,
autoplaySpeed: 5000,
dots: true,
infinite: true,
arrows:false,
speed: 300,
});
});
</script>