Magento 1.9 jQuery – TypeError: jQuery(…).owlCarousel is Not a Function

jquerymagento-1.9

I get a problem with the owl-Carousel. I have tried many different answers from the same question however nothing helps. So I will show you all my code and hope someone knows the answer.The problem keep appears "TypeError: jQuery(…).owlCarousel is not a function".

This is my local.xml content where I've included the js & css files:

     <default>
<reference name="head">
    <action method="addJs"><script>lib/jquery/jquery-2.1.1.js</script></action>
    <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
    <action method="addJs"><script>assets/js/jquery.popup.min.js</script></action>
    <action method="addJs"><script>assets/js/jquery.popup.js</script></action>
    <action method="addItem"><type>js_css</type><name>assets/css/popup.css</name></action>
    <action method="addJs"><script>owl/owl-carousel/owl.carousel.min.js</script></action>
    <action method="addItem"><type>js_css</type><name>owl/owl-carousel/owl.carousel.css</name></action>
    <action method="addItem"><type>js_css</type><name>owl/owl-carousel/owl.theme.css</name></action>
    <action method="addItem"><type>js_css</type><name>owl/owl-carousel/owl.transition.css</name></action>

This is my code for showing the products in the slider with the jQuery script underneath:

jQuery.noConflict();
jQuery(document).ready(function() {

  jQuery("#owl-demo").owlCarousel({
    items : 4,
    lazyLoad : true,
    navigation : true
  }); 

});
     </script>

   <div id="owl-demo" class="owl-carousel">
   <?php

    $categoryId = 2; // this is the category holding your products  
    $products =   Mage::getSingleton('catalog/category')->load($categoryId)   // load the category
           ->getProductCollection() // and the products
           ->addAttributeToSelect('image'); // tell Magento which attributes to get

     foreach ($products as $product) { // iterate through the entire collection
    echo '<div class="item"><img src='.$product->getImageUrl().'></div>'; // print the image url inside of the required Owl markup
    }

 ?>
 </div>

Best Answer

Please remove "owl.carousel.js" ans also add jQuery.noConflict(); before "jQuery(document).ready(function() {" .

Please check another jquery library is not included in head except "jquery-2.1.1.js".

Related Topic