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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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:

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>

<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

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: [
    "<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"     
    ]
  });
});

Answer 2

Include Jquery in top of the all js files

like below orders

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="~/bootstrap-assets/js/bootstrap.min.js"></script>  

And so on...

Answer 3

@isanka in custom.js try this:

(function($) {
    $(document).ready(function() {
            // your code;
    });
}) (jQuery);

As @the_5imian said, include jquery 1.11.3 before all included scripts.

Answer 4

this is my custom.js file.

$(document).ready(function () { /***************** Navbar-Collapse ******************/

$(window).scroll(function () {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

/***************** Page Scroll ******************/

$(function () {
    $('a.page-scroll').bind('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

/***************** Scroll Spy ******************/

$('body').scrollspy({
    target: '.navbar-fixed-top',
    offset: 51
})

/***************** Owl Carousel ******************/

$("#owl-hero").owlCarousel({

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

});


/***************** Full Width Slide ******************/

var slideHeight = $(window).height();

$('#owl-hero .item').css('height', slideHeight);

$(window).resize(function () {
    $('#owl-hero .item').css('height', slideHeight);
});
/***************** Owl Carousel Testimonials ******************/

$("#owl-testi").owlCarousel({

    navigation: false, // Show next and prev buttons
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: "backSlide",
    autoPlay: true

});
/***************** Countdown ******************/

$('#fun-facts').bind('inview', function (event, visible, visiblePartX, visiblePartY) {
    if (visible) {
        $(this).find('.timer').each(function () {
            var $this = $(this);
            $({
                Counter: 0
            }).animate({
                Counter: $this.text()
            }, {
                duration: 2000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
        $(this).unbind('inview');
    }
});
/***************** Google Map ******************/

function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: new google.maps.LatLng(39.92757, -83.160207),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

/***************** Wow.js ******************/

new WOW().init();

/***************** Preloader ******************/

var preloader = $('.preloader');
$(window).load(function () {
    preloader.remove();
});

})