Step 1: Add your module js file under
<Vendor>/<Module_Name>/view/<area>/web/js/
e.g.
<Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js
Step 2: Create
requirejs-config.js
file under <Vendor>/<Module_Name>/view/<area>/
e.g.
<Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js
Add following code to
requirejs-config.js
var config = {
map: {
'*': {
bannerslider: 'VendorName_ModuleName/js/flexslider'
}
}
};
Note: you may set your object name as per your choice. In my case I have set as bannerslider
and do not add the .js extension to file name in VendorName_ModuleName/js/flexslider
Step 3: Call the
function
of your module js in .phtml
file as following manner.
<script type="text/javascript">
require(['jquery','bannerslider'],function($){
$(window).load(function() {
$('.flexslider-8').flexslider({
animation: "fade",
controlNav: "thumbnails",
slideshowSpeed: 2000,
minItems: 2,
maxItems: 4
});
});
});
</script>
Its working fine for me.Trace : Use
Net
tab to see requested URL of js file loaded or not.
Note: better to use 'domReady!' plugin instead of
$(window).load(), for example require(['jquery','bannerslider',
'domReady!],function($) { ...code execute only after dom load})
No comments:
Post a Comment