Uncaught TypeError: owl.owlCarousel is not a function

Before anything else, let me say that I have looked at other similar questions here and I still can't figure this out.

I'm trying to build a website, using .NET MVC (razor) using a this free template I found online.

What I did, was to replace all the markup of my Index.chstml view with the html code of the template. Moved all the scripts and css files to the corresponding folders in my solution, and changed the html to correctly reference the new paths as required.

Needless to say that the original template works perfectly. But for some reason I really can't figure out I'm getting the error:

     Uncaught TypeError: owl.owlCarousel is not a function

I looked at the developer tools (chrome) and the scrips are there, so the only thing I can think of is something related to the loading order. Off course I didn't change that, so I wonder if razor did it somehow.

This is how my script loading section looks like:

<script src="@Url.Content("~/Scripts/modernizr-2.6.2.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.easing.1.3.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.waypoints.min.js")"></script>
<script src="@Url.Content("~/Scripts/owl.carousel.min.js")"></script>
<script src="@Url.Content("~/Scripts/main.js")"></script>

and the problem happens inside main.js, right here:

    owl.owlCarousel({
        items: 1,
        loop: true,
        margin: 0,
        responsiveClass: true,
        nav: true,
        dots: true,
        autoHeight: true,
        smartSpeed: 500,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        navText: [  
          "<i class='icon-arrow-left2 owl-direction'></i>",
          "<i class='icon-arrow-right2 owl-direction'></i>"
        ]
    });

Thanks to everyone in advance.

Answers


Well, I feel a bit ashamed, but looks it was just a conflict between the scripts that the template uses, with the ones MVC razor includes by default.

I commented this at the Layout partial view:

@@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap")@

and voila! I realized that my code was loading more scripts than the original template.

Thanks everybody.


Need Your Help

Search words in any order using JS

javascript jquery web-sql

I have code to search the typed words from the text box, Get the typed word, search it in the web sql database and show the result in the HTML page.

Composite Clustered Index in SQL Server

sql-server database-design composite-index

I have a table with a IDENTITY Column as Primary Key (a classic ID column).