I've encountered an issue while trying to integrate owl-slider with a WordPress theme. The goal is to display the featured image of the latest 4 posts along with their titles and brief descriptions. However, when inspecting the output, all we see is a white div for the owl-slider.
Here's a screenshot showing the problem: https://i.sstatic.net/xNiTv.png
Below is the code snippet for the loop:
<div class="SlideShow">
<div id="owl-slider" class="owl-carousel owl-theme">
<?php
$the_query = new WP_Query( 'posts_per_page=4' );
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class="item">
<?php the_post_thumbnail( 'full' ); ?>
<div class="caption">
<a href="<?php the_permalink(); ?>">Read More</a><!--More Link-->
<div class="innercapt">
<h1><?php the_title(); ?></h1><!--Title-->
<p><?php echo excerpt(9);?></p><!--Description-->
</div>
</div>
</div>
<?php endwhile;
// Reset Post Data
wp_reset_postdata(); ?>
</div>
</div>
The function is invoked in the footer using this script:
<script>
;(function($){
$("#owl-slider").owlCarousel({
autoPlay: true,
navigation : true, // Show next and prev buttons
slideSpeed : 300,
pagination : false,
singleItem : true
});
})(jQuery);
</script>