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