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 you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.