Slick Slider Carousel with Recent post loop not working - php

Question

I am trying to implement a recent posts carousel using Slick Slider and ACF.
I have found a great tutorial and followed the instructions here:
https://imranhsayed.medium.com/slick-slider-wordpress-without-plugin-slick-carousel-ef2394c737ef
and after MUCH trial and error I can get it to work as expected using some basic test content like this:
<div class="posts-carousel">
<div>test</div>
<div>test</div>
<div>test</div>
</div>
But when I try and implement the code for the recent posts loop, I just get a white screen. I'm not great at php but I have tried to work out the issue and just I can't see it.
Another code example that is given works perfectly when copy and pasted:
<div class="posts-carousel px-5">
<!--Slide One-->
<div class="card">
<img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
<div class="card-body">
<h3 class="card-title">Your Post heading</h3>
<p>Your Post Excerpt</p>
View More
</div>
</div>
<!--Slide Two-->
<div class="card">
<img width="350" height="233" src="https://via.placeholder.com/150" class="w-100" alt="alt-text">
<div class="card-body">
<h3 class="card-title">Your Post heading</h3>
<p>Your Post Excerpt</p>
View More
</div>
</div>
</div>
But the code example for including a post loop does not
<?php
/**
* Posts Carousel
*
* #package aquila
*/
$args = [
'posts_per_page' => 5,
'post_type' => 'post',
'update_post_meta_cache' => false,
'update_post_term_cache' => false,
];
$post_query = new \WP_Query( $args );
?>
<div class="posts-carousel px-5">
<?php
if ( $post_query->have_posts() ) :
while ( $post_query->have_posts() ) :
$post_query->the_post();
?>
<div class="card">
<?php
if ( has_post_thumbnail() ) {
the_post_custom_thumbnail(
get_the_ID(),
'featured-thumbnail',
[
'sizes' => '(max-width: 350px) 350px, 233px',
'class' => 'w-100',
]
);
} else {
?>
<img src="https://via.placeholder.com/510x340" class="w-100" alt="Card image cap">
<?php
}
?>
<div class="card-body">
<?php the_title( '<h3 class="card-title">', '</h3>' ); ?>
<?php aquila_the_excerpt(); ?>
<a href="<?php echo esc_url( get_the_permalink() ); ?>" class="btn btn-primary">
<?php esc_html_e( 'View More', 'aquila' ); ?>
</a>
</div>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</div>
I tried editing or removing the references to 'aquila' which I think is the theme the post writer it using but it did not work
I currently have this:
<?php
$args = [
'posts_per_page' => 2,
'post_type' => 'post',
];
$post_query = new WP_Query( $args );
?>
<div class="posts-carousel px-5">
<?php
if ( $post_query->have_posts() ) :
while ( $post_query->have_posts() ) :
$post_query->the_post();
?>
<div class="card">
<?php
if ( has_post_thumbnail() ) {
the_post_custom_thumbnail(
get_the_ID(),
'featured-thumbnail',
[
'sizes' => '(max-width: 350px) 350px, 233px',
'class' => 'w-100',
]
);
} else {
?>
<img src="https://via.placeholder.com/510x340" class="w-100" alt="Card image cap">
<?php
}
?>
<div class="card-body">
<?php the_title( '<h3 class="card-title">', '</h3>' ); ?>
</div>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();
?>
</div>
I have actually found a plugin that can do it for me, but I feel like I am so close to getting it working, i just can't work it out.
Any help would be great

Answer 1

I have the same problem. You can try change the name of thumbnail function :
<?php
if ( $post_query->have_posts() ) :
while ( $post_query->have_posts() ) :
$post_query->the_post();
?>
<div>
<div class="card">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(
get_the_ID(),
'featured-thumbnail',
[
'sizes' => '(max-width: 350px) 350px, 233px',
'class' => 'w-100',
]
);
} else {
?>
<img src="https://via.placeholder.com/510x340" class="w-100" alt="Card image cap">
<?php
}
?>
<div class="card-body">
<?php the_title( '<h3 class="card-title">', '</h3>' ); ?>
<?php the_excerpt(); ?>
<a href="<?php echo esc_url( get_the_permalink() ); ?>" class="btn btn-primary">
<?php esc_html_e( 'View More', 'aquila' ); ?>
</a>
</div>
</div>
</div>
<?php
endwhile;
endif;
wp_reset_postdata();