Magento : Load 2 js libraries into magento 2 homepage, and call some functions in page content

Question

I've been trying to add 2 new javascript libraries into my Magento 2 installation, and to do that, I've added them through "app/design/frontend/theme/themeName/layout/default_head_blocks.xml" and I have also created a "requirejs-config.js" into my theme folder, and I have loaded my libraries into my "web/js" folder. Now one of the librarie is "jquery-3.3.1.min.js" and the other is "jquery.bxslider.min", I've tried to load them from cdn, but wasn't working, so I loaded them on my hosting. Anyway now I'm calling the function for running the sliders, but is now working any of the sliders, and is not working even the menu on mobile, basically is not opening the hamburger menu anymore.

Answer 1

Try this:

Add this code in requirejs-config.js:

var config = {
    paths: {            
            'bxslider': "'js/jquery.bxslider.min"
        },
    shim: {
        'bxslider': {
            deps: ['jquery']
        }
    }
};

And add this code to your PHTML file:

require(['jquery', 'bxslider'], function($){ 
    $(function() {      
        $('.slider').bxSlider({ auto: true, autoDelay: 2000, controls: false, pager: false });
    });
}); 

Remove your jquery-3.3.1.min.js.