Owlcarousel2: Uncaught TypeError: $(...).owlCarousel is not a function (even doing it properly)

[rolenzian648]

https://naptime-lights-out.myshopify.com/products/sheets

Can you please check the site above? I am quite sure I have declared the jquery file before the owlcarousel script. But still, the error is present

Let me know if what the problem is.

Thanks

[keefyhub]

I dont really have enough javascript knowledge to explain why, but Ive had to wrap it be able to use $

$(document).ready(function () {
    (function ($) {
        $('.owl-carousel').owlCarousel({
            ...
        });
    })(jQuery);
});

[rolenzian648]

This by the way is a Shopify store.

Already tried this code:

$(document).ready(function () {
        (function ($) {
            $('.owl-carousel').owlCarousel();
        })(jQuery);
    });

But still does not work, tne error is still there, can you please check it out?

https://naptime-lights-out.myshopify.com/products/sheets

Thanks

[keefyhub]

it could be a conflict with another library - https://stackoverflow.com/questions/39401375/shopify-carousels-owl-slider-responsiveslides

so

jQuery(document).ready(function() {
  jQuery("#owl-demo").owlCarousel({
  });
});

might work

[rolenzian648]

hi Keefyhub

http://prntscr.com/fgtmzu

still does not work :( see the screenshot above.

Thanks

[keefyhub]

Have you tried removing other scripts to see if its an issue with another library? Id recommend removing all other scripts (apart from jQuery), then if it works, adding them back in one at a time

[edulelis]

This error might be caused if you called the owlCarousel function after including the jQuery file but before including the owl-carousel file.
In this case the owlCarousel function is not yet defined in the jQuery scope.
To be sure everything is loaded you might prefer using: $(window).load() instead or inside of $(document).ready().
Finally, you can avoid library conflicts, if any, with a syntax like this:
jQuery(function($){ ...your code... });

[bitcuantico]

Thanks @edulelis, you save me. <3

[herbione]

Thanks!!!

[benjungkz]

Thanks! It works!

[ashikjs]

ha ha ha it was a jokes for me ...I got solution by this way ... Just add defer to my owl.carousel plugin call script

<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>

documention about defer att_script_defer

[vedmant]

I fixed it using script-loader importing with import 'script-loader!owl.carousel'

[Allan-Nava]

ha ha ha it was a jokes for me ...I got solution by this way ... Just add defer to my owl.carousel plugin call script

<script defer src="plugins/OwlCarousel2.3/owl.carousel.min.js"></script>

documention about defer att_script_defer

I got the same error:

home_gamefication.js:2 Uncaught TypeError: $(...).owlCarousel is not a function
    at HTMLDocument.<anonymous> (home_gamefication.js:2)
    at j (jquery-3.2.1.js:3192)
    at Object.fireWith [as resolveWith] (jquery-3.2.1.js:3352)
    at Function.ready (jquery-3.2.1.js:3572)
    at HTMLDocument.J (jquery-3.2.1.js:3652)

[iballi2017]

Check the if it is well linked to your JS file. I had the same issue once in PHP where i moved files into another folder and my owl-carousel started throwing such error messages

[izoelgmail]

Same problem with me as first time using OwlCarousel2-2.3.4 version, i end up with this trick :

`
$(document).ready(function() {
setTimeout(function(){$(".owl-carousel").owlCarousel()},2000);
})

`

[dreDevOS]

This error might be caused if you called the owlCarousel function after including the jQuery file but before including the owl-carousel file.
In this case the owlCarousel function is not yet defined in the jQuery scope.
To be sure everything is loaded you might prefer using: $(window).load() instead or inside of $(document).ready().
Finally, you can avoid library conflicts, if any, with a syntax like this:
jQuery(function($){ ...your code... });

this did not waork for me

[MuhammadSalman009-tech]

https://naptime-lights-out.myshopify.com/products/sheets

Can you please check the site above? I am quite sure I have declared the jquery file before the owlcarousel script. But still, the error is present

Let me know if what the problem is.

Thanks

I dont really have enough javascript knowledge to explain why, but Ive had to wrap it be able to use $

$(document).ready(function () {
    (function ($) {
        $('.owl-carousel').owlCarousel({
            ...
        });
    })(jQuery);
});

please replace order of file inclusion
like this

//external file

[deepakkumartiwari]

Thanks @ashikjs It's worked for me.

[sraza295]

@edulelis Thank you so much, you saved my day..

[topdeveloper0729]

Thanks @edulelis .
I solved the problem.
Thanks again!

[innerpumper]

Kesalahan ini mungkin terjadi jika Anda memanggil fungsi owlCarousel setelah memasukkan file jQuery tetapi sebelum memasukkan file owl-carousel.
Dalam hal ini, fungsi owlCarousel belum ditentukan dalam cakupan jQuery.
Untuk memastikan semuanya dimuat, Anda mungkin lebih suka menggunakan: $(window).load()daripada di dalam $(document).ready().
Terakhir, Anda dapat menghindari konflik perpustakaan, jika ada, dengan sintaks seperti ini:
jQuery(function($){ ...your code... });

can you give me example? i don't know because i first use Carousel js

[mounika9398]

Hi All, I did what ever suggestions provided by you all, now i am not getting any error, but that owlCarousel function was not working for me, please any one help me.