Home > database >  Uncaught TypeError: $(...).owlCarousel is not a function why this error?
Uncaught TypeError: $(...).owlCarousel is not a function why this error?

Time:11-29

I'm using this code to add carousel in divi theme using shortcode but it kept showing this type error, can anyone help ....? thanks in advance

<script>> $(document).ready(function() {
$('.slider').addClass('owl-carousel');
$('.slider').owlCarousel({
   loop:true,
   margin:10,
   items:1,
   dots:true,
   nav:false,
   URLhashListener:true
 })
$('.slider2').addClass('owl-carousel');
 $('.slider2').owlCarousel({
   loop:true,
   margin:10,
   nav:true,
   items:1,
   dots:false,
   center: true,
   URLhashListener:true    
 })
})
</script>

CodePudding user response:

There is a small syntax error. There is an extra > after <script>.

Perhaps you will need to add the same code in a new JS file and enqueue the same in your site and replace $ with jQuery. I tried and worked for me.

CodePudding user response:

The issue could be because of 2 reasons

  1. As you're not using a jQuery object and just using $ so can give you an error as in WordPress you need to use jQuery not the $

  2. Your owl.js is not loading before you inline the script.

How to solve:

  1. replace $(document).ready(function() with jQuery(document).ready(function($) or jQuery(function($)
  2. If you're adding any external jquery cdn url then please remove it. WordPress comes with jQuery you don't need to re-add another jquery script.
  3. Make sure your owl.js is loading on the header part(after jquery.js) not on the footer.
  • Related