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.
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.
Share Improve this question asked Nov 13, 2016 at 17:08 Richard RodriguesRichard Rodrigues 411 silver badge3 bronze badges3 Answers
Reset to default 11The 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.
Same problem here. I tried using older version of jQuery and it worked just fine. Try using older version of jQuery.