Trying to create an Owl Carousel (in Wordpress) that loops through user testimonials. The testimonials are added via custom post types in the wordpress dashboard. There is already content there for me to use and test.
The Owl Carousel has been registered in my custom script.js file and loop seems to working correctly. My issue that the loop seems to be pulling in the custom post types correctly and the owl carousel is being triggered in the browser.
However when I view the carousel in the browser none of the content appears. Viewing the source code shows the content but doesn't seem to display in the browser. Am i missing something completely obvious? Please help!
screen shot snippet when inspecting from browser
$("#footer-testimonials").owlCarousel({
center: true,
singleItem:true,
loop:true,
margin:10,
autoplay: true,
nav:true
});<div id="footer-testimonials" class="owl-carousel owl-theme">
<?php while ( $testimonials->have_posts() ) : $testimonials->the_post(); ?>
<?php
$content = get_the_content();
if (strlen($content) > 200) {
$summary = substr($content, 0, strrpos(substr($content, 0, 200), ' ')). '...';;
} else{
$summary = $content;
}
?>
<?php $link = get_permalink($testimonials->post->ID);?>
<div class="item">
<li class="" style="list-style-type: none;">
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<div class="testimonial-text">
<a href="<?php echo $link ?>"><span itemprop="reviewBody"><?php echo $summary; ?> </span></a>
</div>
<div class="slide-content">
<a itemprop="url" href="<?php echo $link ?>"><h3 class="testimonial-name text-center"><span itemprop="name"><?php the_title(); ?></span></h3></a>
</div>
</div>
</li>
</div>
<?php endwhile; ?>
</div> </div>