Owl WordPress 循环中的轮播加载问题

Question

我目前正在使用 owl 旋转木马滑块显示来自 WooCommerce 的 12 个随机产品，当页面加载时，在 owl 计算所有结果 "springboarding"类型效果。

我已经完成了一些关于使用通用 owl 轮播的测试，它具有静态内容并且在页面加载时呈现良好，但是随着从 WordPress 循环中提取数据的介绍，这就是问题所在谎言！

相同http://preview.meeko.me/product/navy-floral-print-pleat-skater-dress/

这是 owl-轮播调用：

var meekoRelated = $('#relatedSlider');
meekoRelated.owlCarousel({
    lazyLoad: true,
    loop: true,
    margin: 10,
    nav: true,
    responsiveClass:true,
    responsive:{
        0:{
            items: 2
        },              
        640:{
            items: 4
        },
        1000:{
            items: 5
        }
    }
});

我进入 Woocommerce 的循环

            <div id="relatedSlider" class="owl-caroucel">

             <?php
             $args = array( 
             'post_type' => 'product', 
             'orderby' => 'rand',
             'posts_per_page' => 12 
             );
             $loop = new WP_Query( $args );
             while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <div class="categoryarchivegrid">    

                    <?php wc_get_template_part( 'content', 'rec' ); ?>

                </div>

             <?php endwhile; ?>
             <?php wp_reset_query(); ?>

            </div>

任何帮助将不胜感激！

Answer 1

我找到问题了，都是我的拼写错误！我正在使用 class "owl-caroucel" 并且在页面加载时它添加了 "owl-carousel".. 所以如果页面需要一段时间来加载它会像 Roamer-1888 建议的那样使用 FOUC 加载无样式。

Owl WordPress 循环中的轮播加载问题

Owl Carousel loading issue when within the WordPress loop

wordpress

jquery

woocommerce

owl-carousel-2