2

This is Library location

app\design\frontend\user\theme\web\js\owl.carousel.min.js

this is my config js file

app\design\frontend\user\theme\requirejs-config.js

var config = {
deps: [
    "js/main"
],

map: {
    '*': {
        owlCarousel:'js/owl.carousel.min'
    }
},

shim: {
    jquery: {
        exports: '$'
    },

    'Magento_Catalog/js/price-box':
        {
            deps: ['jquery']
        },

    owlCarousel: ["jquery"]
}

};

Inside

app\design\frontend\user\theme\web\js\main.js

define([
"jquery",
"owlCarousel"
], 

function($) {
"use strict";

if(typeof owlCarousel === 'function') { 
  console.log('owlCarousel is loaded');
}else{
  console.log('owlCarousel is NOT loaded');
}

});

Inside phtml

require(['jquery', 'owlCarousel'],function($, owlCarousel){
    jQuery(document).ready(function() {
        jQuery('.owl-carousel').owlCarousel({
            margin:10,
            nav:true,
            mouseDrag:false,
            navText : ["",""],
            rewindNav : true,
            responsive:{
                0:{
                    items:3
                },
                600:{
                    items:3
                },
                1000:{
                    items:3
                }
            }
        });
    });
});

Result

owlCarousel is NOT loaded

(index):1175 Uncaught TypeError: jQuery(...).owlCarousel is not a function

1 Answer 1

0

Instead of using jQuery in your document.ready function use $ instead since it is the one defined in your function.

Try this:

require(['jquery', 'owlCarousel'],function($, owlCarousel){
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            margin:10,
            nav:true,
            mouseDrag:false,
            navText : ["",""],
            rewindNav : true,
            responsive:{
                0:{
                    items:3
                },
                600:{
                    items:3
                },
                1000:{
                    items:3
                }
            }
        });
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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