Question

我似乎无法让nivo滑块和光滑的轮播（http://kenwheeler.github.io/slick/）在我的网站上一起工作。我认为这是一个关于何时/如何拉取jquery脚本的问题，但由于我的javascript知识相当渺茫，我不知道如何修复它。

最初我在文档的末尾有了jquery脚本，你可以看到

<?php wp_footer(); ?>
<!-- <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->
<!-- <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> -->

<script type="text/javascript" src="/wp-content/slick-1.3.13/slick/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.rotator').slick({
           infinite: true,
           slidesToShow: 3,
           slidesToScroll: 1
        });
    });
</script>
</body>
</html>

但是因为事实证明这里有jquery导致nivo滑块无法工作。

我似乎无法弄清楚我的主题中的哪个PHP文件会拉出jquery脚本，但我知道它被拉到了某个地方，因为nivo滑块工作正常，这显示在源代码中：< / p>

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>

我知道问题不在于我如何在页面本身上实现光滑的轮播，因为它一直在用，直到我在上面的第一个代码块中注释掉这些行。

任何帮助都将不胜感激。

Answer 1

您在控制台中出错。 Wordpress使用jQuery.noConflict();，因此$将是未定义的。

像这样使用：

    jQuery(document).ready(function($) {
        $('.rotator').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1
        });
    });

Answer 2

由于wordpress正在使用＆＃34; jQuery.noConflict（）;＆＃34; $未定义。

您需要使用以下内容：

 jQuery(document).ready(function($){ //jQuery passed in as first param, so you can use $ inside
        $('.rotator').slick({
 infinite: true,
 slidesToShow: 3,
 slidesToScroll: 1
        });
    });

nivo滑块和光滑的轮播无法协同工作的问题 - jquery

2 个答案: