Video Testimonial Slider

Reusable Custom Blocks

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>

Leave a Reply

Your email address will not be published. Required fields are marked *