Menu
I'm trying to install Owl Carousel 2 in my website, for the first time using this, and following all the insctructions I'm still having some problems.
After import all files:
<head>
<meta charset="utf-8">
<title>The badass man alive</title>
<!-- CSS -->
<link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/vendors/owl-carousel/assets/owl.carousel.css">
<!-- Javascript -->
<script src="assets/vendors/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="assets/vendors/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
<script src="assets/js/script.js" type="text/javascript"></script>
Adding the demo javascript code:
$(function() {
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});
And trying to load the example file:
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
</div>
The console returns this:
jQuery.Deferred exception: a(...).find(...).andSelf is not a function TypeError: a(...).find(...).andSelf is not a function
at c.<anonymous> (file:///.../assets/vendors/owl-carousel/owl.carousel.min.js:2:7592)
at HTMLDivElement.e (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:2:3655)
at HTMLDivElement.dispatch (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:3:10315)
at HTMLDivElement.q.handle (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:3:8342)
at Object.trigger (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:4:5808)
at HTMLDivElement.<anonymous> (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:4:6318)
at Function.each (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:2:2815)
at r.fn.init.each (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:2:1003)
at r.fn.init.trigger (file:///.../assets/vendors/jQuery/jquery-3.1.1.min.js:4:6294)
at e.trigger (file:///.../assets/vendors/owl-carousel/owl.carousel.min.js:1:22366) undefined
Uncaught TypeError: a(...).find(...).andSelf is not a function(…)
And I have no ideia why it's returning this error.
538
The problem is in absence of andSelf function in older versions of jQuery. Try to add to your .js file the following
$.fn.andSelf = function() {
return this.addBack.apply(this, arguments);
}
.andSelf() was deprecated in jQuery 1.8 and removed in jQuery 3.0. .addBack() should be used instead from jQuery 1.8 onward.
So for a quick and dirty fix, in your owl.caorusel.min.js file, just replace the word "andSelf" with "addBack", and it will work.
43
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
