TypeError: $(...).owlCarousel is not a function

Question

I am having troubles adding this carousel to my prestashop template.

It returns me the following error:

TypeError: $(...).owlCarousel is not a function navigation : true

And the code using to initialize it is this one

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation : true
  });
});

I am trying to solve it, but seems imposible, since on an empty html page it works but not when I use it on the Prestashop.

Any clue?

Thanks.

Triennium

Found this solution here on stackoverflow, worked for me – Misplace

Answer 1

Add owl.carousel.min.js file in your home page and before the file in which you are using add the following code:

$("#owl-demo").owlCarousel({
    navigation : true
  });

Then only it will work.

Isolationist

Answer 2

You will get this error if the jquery file is loading after the owl carousel file.

(Make sure your reference to jquery is above the owl carousel reference js file)

Johns

Thanks for starting this answer. Try offering insight on where they might look for the problem and how they might fix the issue. – Bestride

Answer 3

The reason sometime html executed inline script before external script loaded perfectly. I get solution by this way . I just added defer attribute to my owl.carousel source calling like ..

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

Documentation about defer attribute --> att_script_defer-link

Glutamate

This fixed my issue. I tried all methods of ordering jquery and js files, cdn links of owl carousel. – Ancilin

Answer 4

If JavaScript files loading is affected by some latency, you can check if function is defined before call it.

Check with jQuery.isFunction

if($.isFunction('owlCarousel')){
  $("#owl-demo").owlCarousel({
    navigation : true
  });
}

Check with JavaScript typeof operator

if(typeof owlCarousel === 'function') { 
  $("#owl-demo").owlCarousel({
    navigation : true
  });
}

Vetchling

Answer 5

Try to use {literal} {/literal} tags. It's usually reccomanded to put javascript inside those tags in .tpl files (smarty) . Javascript might work without the tags but can sometimes return a error ( like in your case )

BR's

Dubbing

I also tried this but keeps without work. It just keeps me returning me the same error. – Triennium

how are you pulling the js in to the file ? Are you using pretsatshop determined pathways in .php (whatever core/module file is displaying ur .tpl file) file ? Example is here: $this->context->controller->addJS(($this->_path).'views/js/YOUR.js'); – Dubbing

I am just adding the script between <script> tags on header.tpl – Triennium

Are you going to use that script on every single page ? And even then you should still add it like that ( if you are using it in within a module , for example ) In your case prestashop will load the script every single time even when it's not being used. – Dubbing

I just want to use it in the home page (otherwise, thanks for warning me about it will be displayed on every single page). So i will have to add the script on the prestashop .php path and add the script? And what about the begining of the function? On the php file also? Or I'll have to make another JS file with the function? – Triennium

Only reason I can think of is that your link to the javascript is not correct as the function can't execute. To display something ONLY on homepage without some module or core files edit use this : {if $page_name == 'index'} {/if} – Dubbing

Hey user2831723, i will give a try later. Otherwise I am asking the same question on prestashop forums, and with the help of moderators, we checked the code and the path is correct – Triennium

I'll try to do some testing when I get some time. I'll get back to you :) – Dubbing

Answer 6

I got fixed by checking if the selector exist or not. As this was the issue on my website I had added code in footer for a single page but it was throwing error or other pages where that selector don't exist.

$(document).ready(function() {
    var owl = $('.servicesCarosal');
            
    //console.log(owl);

    if (owl.length) { 
        owl.owlCarousel({

        });
    } 
});

Genovera

Answer 7

First, add Owl Carousel Css and Owl Carousel Theme Default Css files.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Then add Jquery and Owl Carousel Js files.

Make sure to put Jquery before Owl Carousel Js.

Like this:

<!-- put jquery before owl carousel -->
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- owl carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Bloodline

Answer 8

Add jquery.min.js and owl.carousel.min.js files in your home page and add the following code:

$(document).ready(function() {
  var owl = $("#owl-demo");
  if(owl.length){
    owl.owlCarousel({
      navigation : true
    });
  }
});

Downfall

Answer 9

These might be helpful. Follow the steps

1. Import/link the owlCarousel.js file
2. Link owlCarousel.js file after jQuery.js file.
3. Hard reload: ctrl + shift + R

Still facing problem?

It might be for this reason:

Your $(".owl-carousel").owlCarousel() function is executing before the loading of JS files (owlCarousel.js,jQuery.js)

Most of the case you can solve this issue by using this tricks & increasing timeout.

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

Rambling

I'm running Rails... so it's pretty hard to get the order of scripts to load right. THIS is the only answer that worked for me. – Bolten

Answer 10

I had the same problem. Just add the js file right above your function

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
        loop: true,
    });
});
</script>

Fern

Why would that help? – Afc

Answer 11

In my case, where I am using Webpack to bundle my assets, I needed to follow this section on the owl's page on GitHub.

The section states that you should add JQuery like so:

webpack.config.js

const webpack = require('webpack');

//...
plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
],
//...

index.js

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

Beriberi

Answer 12

Add Your Jquery file and owl.js file to header section

Sinner

Answer 13

For me, adding itemclass to carousel-item

-result is below-

<div class="item carousel-item" style="margin: auto;">

solved problem.

Globulin