I’m trying to use owl carousel as a custom WordPress visual composer element to display posts but it seems to only be showing the featured images as the carousel items and then it adds the spans underneath the carousel.

Any ideas why the spans are not being included in the owl carousel items ?

// Blog Carousel
function blogcarousel_func( $atts ) {
 ob_start();
  extract( shortcode_atts( array(
    'nanook_cat_name' => '',
    'nanook_products_per_row' => '',
    'nanook_nav_style' => ''
), $atts ) );

             $postsPerPage = 16;
                         $cat = $nanook_cat_name;
             $args = array(
                     'post_type' => 'post',
                                         'posts_per_page' => '12'
             );
             $loop = new WP_Query($args);
                         $cat_id = $cat;
                         ?>
                            <div class="blog-carousel owl-carousel <?php echo $nanook_products_per_row; ?>items <?php echo $nanook_nav_style; ?>nav">
                                <?php
                    while ($loop->have_posts()) : $loop->the_post();

                                    $output .= '<div>';
                                    $output .= the_post_thumbnail('thumbnail');
                                    $output .= '<span>test</span>';
                                    $output .= '</div>';

                    endwhile;
                                wp_reset_postdata();
                                ?>

                         </div>

                         <?php
    echo $output;
$myvariable = ob_get_clean();
    return $myvariable;
}

Read more here: Owl Carousel not wrapping the correct div


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: