0
       <script>
         var $fz = jQuery.noConflict();        
          $fz(document).ready(function() {
           var owl = $fz('.owl-carousel');
           owl.owlCarousel({
            loop: true,
             nav: true,
            margin: 10,
            responsive: {
               0: {
                items: 1
               },
               600: {
                 items: 3
               },
               960: {
                 items: 5
               },
               1200: {
                 items: 6
               }
             }
           });
           owl.on('mousewheel', '.owl-stage', function(e) {
             if (e.deltaY > 0) {
               owl.trigger('next.owl');
             } else {
              owl.trigger('prev.owl');
            }
             e.preventDefault();
           });
         })
   </script>

the error shown when running

(index):632 Uncaught TypeError: jQuery(...).owlCarousel is not a function at HTMLDocument. ((index):632) at n (jquery.min.js:2) at Object.fireWith (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.B (jquery.min.js:2) (anonymous) @ (index):632 n @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 B @ jquery.min.js:2

2 Answers 2

0

You can follow below tutorial to add owl slider.

http://www.anderswik.se/magento/2015/06/28/Magento-Adding-Owl-Slider.html

2
  • now i'm using magento 1.9.3
    – M.ANAND
    Feb 13, 2018 at 8:51
  • Check my updated answer. Feb 13, 2018 at 8:58
0

Error (is not a function) says you are not loading owlCarousel library... double check your Javascript resources loaded in the page

You can download it here https://owlcarousel2.github.io/OwlCarousel2/

And here you have more info about adding a Javascript resource in Magento layout files: how to add js in custom module layout xml file

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.