0

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>
2

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 have added the noConflict however that shouldn't be a problem , I have also deleted the owl.carousel.js and there is no other library than 2.1.1. And still getting the same error. – Bako Gdaniec Oct 1 '15 at 12:39
  • please add script code before <div id="owl-demo" class="owl-carousel"> – John Oct 1 '15 at 12:50
  • I have done that before and it hasn't worked. I've tried that now and no difference the problem keeps appearing. – Bako Gdaniec Oct 1 '15 at 12:53
  • can you please post your page view source head section image?so i can look for jquery conflict. – John Oct 1 '15 at 12:58
  • 1
    After all you were right about it I have deleted the jquery and the fault has disappeared. The only thing is the carousel is not showing up on the home page. I am not sure if it might be because I dont have any products I will add products and see. Just curious if a css should appear even without any images. And Thank You very much ! – Bako Gdaniec Oct 1 '15 at 14:16
0

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.