Uncaught TypeError: $(...).owlCarousel is not a function
<p>I have added owlCarousel  to my page. but im getting this error. and stuck with it hours.. :(</p>

<p><strong>HTML code</strong>
<a href="https://i.stack.imgur.com/MPR45.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MPR45.png" alt="enter image description here"></a></p>

<p><strong>function in custom.js</strong> 
$("#owl-hero").owlCarousel({</p>

<pre><code>    navigation: true, // Show next and prev buttons
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "fadeUp",
    autoPlay: true,
    navigationText: ["&lt;i class='fa fa-angle-left'&gt;&lt;/i&gt;", "&lt;i class='fa fa-angle-right'&gt;&lt;/i&gt;"]

});
</code></pre>

<p><strong>Reference added</strong> 
<a href="https://i.stack.imgur.com/K1BvO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K1BvO.png" alt="enter image description here"></a></p>

<p><strong>Screen shot from chrome</strong>
<a href="https://i.stack.imgur.com/eGzzL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eGzzL.png" alt="check here error screenshot"></a></p>