title: Uncaught TypeError: $(...).owlCarousel is not a function
body: <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>