TypeError: j(...).bxSlider is not a function - Sliders are not working
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>
Answer
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;
- Check your jQuery and other JavaScript file paths.
- Check if you're using an old version of jQuery or incompatible versions of jQuery & jQuery UI.
- Don't work with stupid developers that may put all your link tags to footer.php and call the scripts from header.php...
- Check if you have different instances and/or versions of jquery.min.js
- (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.