I am currently creating custom jquery widget for owl-carousel
just to learn how to do it properly in magento-2
.
I have configured my own module in requirejs-config.js
at theme level.
var config = {
map: {
'*': {
'carousel': 'js/carousel',
'owlcarousel': 'js/owlcarousel/owl.carousel',
}
},
shim: {
'owlcarousel': {
deps: ['jquery']
},
'carousel': {
deps: ['jquery','owlcarousel']
}
}
};
and then inside carousel.js
I am setting like below
define([
'jquery',
'owlcarousel'
], function($) {
'use strict';
$.widget('custom.slider',{
_create: function(config,element) {
$(this.element).owlCarousel(config);
}
});
return $.custom.slider;
});
and finally call inside .phtml template
with below code.
<div class="custom-element" data-mage-init='{"carousel":{"items": 11}}'>
</div>
Still I am not seeing owl-carousel being loaded with my config that I am passing into data-mage-init.
Please tell what I am doing wrong?
EDIT-
If I write like this, it doesn't work.
_create: function(config,element) {
this.element.owlCarousel(config);
}
But with this it does.
_create: function(config,element) {
this.element.owlCarousel(this.options);
}