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

Question

I have added owlCarousel to my page. but im getting this error. and stuck with it hours.. :(

HTML code

function in custom.js

Answer 1

You will get this error if your scripts are out of order. You must load in the right order

1. jquery

2. your fancy carousel (owl carousel)

3. your script calling owlCarousel()

(You will also get this if you never imported the owlCarousel plugin in the first place.)

To explain: jquery will put the $ variable in the global namespace. your owlCarousel plugin will modify the global namespace. Then you may call it as a chainable function in jquery. It must occur in this order, if anything is missing or rearranged it shall break.

To fix: Move jQuery

to the top of the entire series of loaded scripts. It is currently loaded after all of the plugins that need it.

Here is more detail from the Owl Carousel docs:

You must import assets in that order. See: http://owlgraphic.com/owlcarousel/

Also in your code..make sure you call the carousel on $(document).ready, so all your scripts and the DOM are initialized.

$(document).ready(function() {
  $("#owl-hero").owlCarousel({
    navigation: true, // Show next and prev buttons
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "fadeUp",
    autoPlay: true,
    navigationText: [
    "", ""     
    ]
  });
});