1

我目前正在使用 owl carousel 滑块显示来自 WooCommerce 的 12 种随机产品，当页面加载时，在 owl 计算所有内容之前似乎存在延迟，从而导致“跳板”类型的效果。

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

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

这是 owl-carousel 调用：

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>

任何帮助将不胜感激！

4

1 回答 1

0

我设法找到了问题，这完全取决于我的拼写错误！我正在使用“owl-caroucel”类，并且在页面加载时它正在添加“owl-carousel”..所以如果页面需要一段时间才能加载，它将按照 Roamer-1888 的建议加载无样式的 FOUC。

于 2015-08-28T08:08:14.383 回答