Alright so the problem is basically unknown for me, never had it before. I tried adding bxslider today but it seems it doesnt work properly. I tried using the other version of the JS that he provided but same thing happends, the images keep on "loading" and they never load. I did inspect element and this is what I got
jQuery.Deferred exception: Cannot read property 'indexOf' of undefined TypeError: Cannot read property 'indexOf' of undefined at jQuery.fn.load (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:9612:12) at HTMLImageElement. (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4394) at Function.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:359:19) at jQuery.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:152:17) at HTMLImageElement. (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4355) at Function.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:359:19) at jQuery.each (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:152:17) at g (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4295) at c (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:4180) at d (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/plugin/jquery.bxslider.min.js:10:2570) undefined
The code that Im using is exactly the same as the one that was on their website.
<head>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<script src="js/plugin/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/plugin/jquery.bxslider.css"/>
<script type="text/javascript" src="js/skripta.js"></script>
</head> <!-- Head ends -->
and of course Im calling it inside separate .js file
$(document).ready(function() {
$('.bxslider').bxSlider();
});
and the body is
<body> <!-- Body start -->
<ul class="bxslider">
<li><img src="js/plugin/images/pic1.jpg"/></li>
<li><img src="js/plugin/images/pic2.jpg"/></li>
<li><img src="js/plugin/images/pic3.jpg"/></li>
</ul>
</body><!-- Body ends -->
The issue is about jQuery version 3.0 and compatibility with bxslider.js
. And this issue was arised by jQuery .load()
function. You have to change bxslider.js
's one line to solve this issue. Open your bxslider.js file and find .load()
function's code line. It was used only 1 time in bxslider.js
, so the necessary change is:
From
$(this).load();
To
$(this).trigger('load');
There's a pull request on github that solves this:
https://github.com/stevenwanderski/bxslider-4/pull/1024
I'd recommend you test it out.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With