TypeError:j(...).bxSlider不是函数 - 滑块不工作

Eki*_*kin 5 html javascript wordpress jquery bxslider

我正在这个网站上工作(我不是那个网站的人,但我不得不修复它).我在firebug上遇到这个错误:TypeError:j(...).bxSlider不是函数

这是我的<head>:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js"></script>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" media="all">

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css">
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen">
<script type="text/javascript" src="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js"></script>
Run Code Online (Sandbox Code Playgroud)

这是我的标记:

<div class="the-main-slider-container">
<ul class="bxslider">

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-1.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-2.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-3.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-4.jpg">
    </li>

    <li>
        <img alt="slider" src="/wp-content/uploads/2014/03/slider-5.jpg">
    </li>

</ul>

<div id="bx-pager">
<div class="pager-wrapper">
    <div class="pager-container">
        <a data-slide-index="0" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-features.png"></a>
        <a data-slide-index="1" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-confezioni.png"></a>
        <a data-slide-index="2" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png"></a>
        <a data-slide-index="3" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-specifiche.png"></a>
        <a data-slide-index="4" href=""><img alt="icone" src="/wp-content/uploads/2014/03/d320-icone-compact2.png"></a>
    </div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是脚本:

<script type="text/javascript"> 
        var j = jQuery.noConflict();

         j(document).ready(function() 
         {
            j('.bxslider').bxSlider({
                pagerCustom: '#bx-pager',
                mode: 'fade'
            });

         });  

        j(function ($) {
        j(document).ready(function(){
          j('.slider8').bxSlider({
            mode: 'vertical',
            slideWidth: 300,
            minSlides: 2,
            slideMargin: 10
          });
        }); 
        });

        j(document).ready(function() {
            j(".various").fancybox({
                maxWidth    : 450,
                maxHeight   : 400,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });
        });

        </script>
Run Code Online (Sandbox Code Playgroud)

正如你所看到的,我试图使用noConflict; 因为我在互联网上看到很多帖子都有同样的错误,看起来他们中的大多数都解决了noConflict的问题; 但这对我不起作用.

顺便说一句,所有的滑块都是用一个名为Cyclone Slider的插件制作的,我真的不知道以前的开发者做过什么......

标记似乎很好.我无法发现什么是错的.任何帮助将非常感激.非常感谢你的时间!

编辑#1:我在源代码中找到的jQuery的其他实例;

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=2.1.05'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.carousel.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.swipe.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.tile.min.js?ver=2.8.2'></script>

     <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.video.min.js?ver=2.8.2'></script>
Run Code Online (Sandbox Code Playgroud)

Eki*_*kin 18

在尝试了很多不同的事情后,我设法解决了自己的问题.我把bxSlider的JavaScript文件,easyResponsiveTabs和脚本调用到footer.php.但是我将header.php中的jQuery和jQuery UI文件与滑块的css文件一起留下了.

现在一切都运行良好,标记通过了验证测试!如果你有同样的错误;

  1. 检查您的jQuery和其他JavaScript文件路径.
  2. 检查您是使用旧版本的jQuery还是不兼容的jQuery和jQuery UI版本.
  3. 不要与愚蠢的开发人员合作,他们可能会将所有链接标记放到footer.php并从header.php调用脚本...
  4. 检查是否有不同的实例和/或版本的jquery.min.js
  5. (在我的情况下)将你的bxSlider js文件放到footer.php中,但将css文件保留在header.php中(用于验证,就这样它运行良好)

你也可以给我写信,我可以尽力帮忙.

  • 这个解决方案对我不起作用,但添加了jQuery.noConflict()呢!我知道你不是那个想出解决方案的人,但我先是从你那里看到的.所以,谢谢你说其他人说它有效.:) (2认同)