TypeError: j(...).bxSlider is not a function - Sliders are not working

StackOverflow https://stackoverflow.com/questions/23502853

Question

I am working on this website ( I wasn't the one made the website but I have to fix it unfortunately). I've got this error on firebug : TypeError: j(...).bxSlider is not a function

Here is my <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>

Here is my markup:

<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>

Here is the script:

<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>

As you can see I've tried to use noConflict;, because I saw lots of post on the internet with the same error and looks like most of them solved the issue with noConflict; but it's not working for me.

By the way, all the sliders were made with a plugin called Cyclone Slider, I really don't get what the previous developer did...

And the markup seems fine. I can't spot what's wrong. Any help would be really appreciated. Thanks a lot for your time!

Edit #1: Other instances of jQuery I've found in the source code;

     <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>
Was it helpful?

Solution

After trying lots of different things, I've managed to solve my own problem. I've put the JavaScript files for bxSlider, easyResponsiveTabs and the scripts calling them to footer.php. But I've left the jQuery & jQuery UI files at the header.php along with the css files for the sliders.

Now everything is working well and the markup passed the validation test! If you're having same kind of error;

  1. Check your jQuery and other JavaScript file paths.
  2. Check if you're using an old version of jQuery or incompatible versions of jQuery & jQuery UI.
  3. Don't work with stupid developers that may put all your link tags to footer.php and call the scripts from header.php...
  4. Check if you have different instances and/or versions of jquery.min.js
  5. (In my situation) Put your bxSlider js files to footer.php but leave the css files in header.php (for validation, just this way it worked well)

Also you can write to me, I can try to help.

OTHER TIPS

Most likely the cause is multiple instances of jQuery. Look further down in your , you'll see that WP has inserted more tags, one of which looks to be jQuery.

The second instance of jQuery is probably being inserted by a plugin. Try to identify which and disable to see if it fixes the problem.

Some people answer that check the jQuery scripts, make sure only have one. But not answer to the "why?" question. I had the same (this question) problem, but resolved. The bxSlider's (linked) JS file make a function to the jQuery, and a later file overwrite this function (delete it, because jQuery don't contain the bxSlider stuff originally). So the answer: put the JS linking after the last jQuery JS file linking, and then works.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top