Kdjykuj

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>

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".

I had this problem when I installed the Bassi Image Slider and it broke a slider function from my theme. I discovered this module was loading it owns jquery directly on its phtml file.

I've commented the jquery call there and it's solved.

Firefox helped me that better than Chrome because it told which library was rendering the error.

Hope it helps some way;