jquery - Caroufredsel 问题：双方都不能正常工作，只能“向左”工作

Question

除了 Jquery 和 Caroufredsel，我没有使用任何东西。我正在使用 Wordpress 生成的条目。

当它向左移动时它工作得很好，但是当它自动滚动到右边或者当我点击右边的分页时它完全疯了。

现场示例在这里： http ://apolinariopassos.com.br/nutricao/

代码是：header.php

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.7.2.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/carouFredSel.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
    $('#carrossel_home_pg').carouFredSel({
    prev: {
        key: "left"
    },
    next: {
        key: "right"
    },
    pagination: "#texto-slider-paginacao"
    });
});
</script>

索引.php

<div id="carrossel_home_pg">
                    <?php $the_query = new WP_Query( array('post_type' => 'post', 'cat' => '8', 'posts_per_page' => '3', 'category_name' => 'slider-home')); 
                          while ( $the_query->have_posts() ) : $the_query->the_post(); 
                    ?>
                            <?php the_post_thumbnail(); ?>   

                    <?php endwhile; ?>
                </div>
                <div id="texto-slider-paginacao" class="pagination"></div>

生成的代码在实时示例中。

预先感谢。

Answer 1

我在我的 javascript 中遇到了类似的错误，但是我使用的是 node.js 而不是 php ......

当 carouFredSel 函数被调用而不是让它在 $(document).Ready 上运行时，我不得不添加一个超时。您可以在 $(document).ready 函数中尝试以下内容：

function spec(){
    $('#carrossel_home_pg').carouFredSel({
    prev: {
        key: "left"
    },
    next: {
        key: "right"
    },
    pagination: "#texto-slider-paginacao"
    });
}
$(window).load(function() {
    setTimeout(spec(), 100);
}); 

Answer 2

我发现这个错误的原因可能是display:none of carousel container。所以这可以通过在 wrapper 变成display:block之后初始化插件来解决。