I have a carousel with n number of widgets and I want to load another n number of items to the carousel once the user focus the last item of the carousel. I have added afteralign
event listener in the carousel to detect the navigation between carousel items and inside the listener I have created one widget and tried to append it to the current carousel using appendChildWidget()
method
_handleLazyLoading: function (evt) {
var selectedItem = evt.target.getActiveChildWidget().getDataItem();
if (selectedItem.page < selectedItem.totalPages) {
if (evt.target.getActiveChildIndex() === evt.target.getChildWidgetCount() - 3) {
var sampleData={"type":"VOD","id":1234,"accessLevel":"GRANTED","title":"sample","description":"A look back at all the Premier League action from the 31st of March 2018.","thumbnailUrl":"url of image","metaFields":{},"tags":
["review","match-round-32"],"watchProgress":0,"favourite":true,"duration":3098,"watchedAt":1522675749000}
var videoCard=new CommonVideoCard(sampleData);
evt.target.appendChildWidget(sampleData)
}
}
}
This is what my event listener code. I have checked in the dom also, if i put a break point after the appending method then I can see the data in the dom after that it seems like the particualr carousel is stuck and I cannot navigate to other items in the carousel.
I just have a try with removeWidget
method and it works.
Any help will be really appreciated.
set the setWidgetLengths(length);
after appending a new child widget.
So the code will look like
_handleLazyLoading: function (evt) {
var selectedItem = evt.target.getActiveChildWidget().getDataItem();
if (selectedItem.page < selectedItem.totalPages) {
if (evt.target.getActiveChildIndex() === evt.target.getChildWidgetCount() - 3) {
var sampleData={"type":"VOD","id":1234,"accessLevel":"GRANTED","title":"sample","description":"A look back at all the Premier League action from the 31st of March 2018.","thumbnailUrl":"url of image","metaFields":{},"tags":
["review","match-round-32"],"watchProgress":0,"favourite":true,"duration":3098,"watchedAt":1522675749000}
var videoCard=new CommonVideoCard(sampleData);
evt.target.appendChildWidget(sampleData);
evt.target.setWidgetLengths(620);
}
}
}