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

MGento
  • 1,519
  • 9
  • 22
M.ANAND
  • 65
  • 5

2 Answers2

0

You can follow below tutorial to add owl slider.

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

Kishan Patadia
  • 5,609
  • 3
  • 24
  • 36
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

Raul Sanchez
  • 3,036
  • 3
  • 28
  • 63