You need to sign in to do that
Don't have an account?
Timothy Barnard
afterScriptsLoaded interrupting init function
Hi,
I'm attempting to load images into a carousel. I make a call to the server to retrieve the records, and then set my Video attribute which is of type list with the videos. After this, I use an aura iteration to load the carousel.
My issue is, is that the Javascript hits line 6, then 23, then comes back to the server call on line 13. This disrupts the loading of the carousel and in turn just loads them in line and not into the carousel. How do I ensure the video list is loaded fully to allow the carousel to load properly in this case?
JS Controller:
I'm attempting to load images into a carousel. I make a call to the server to retrieve the records, and then set my Video attribute which is of type list with the videos. After this, I use an aura iteration to load the carousel.
My issue is, is that the Javascript hits line 6, then 23, then comes back to the server call on line 13. This disrupts the loading of the carousel and in turn just loads them in line and not into the carousel. How do I ensure the video list is loaded fully to allow the carousel to load properly in this case?
JS Controller:
// Sets videoObject component attribute w/ record data getVideoObject: function(component){ var action = component.get("c.getCurrVideo"); console.log('line 6', action); action.setParams({ recId : component.get("v.recordId") }); action.setCallback(this, function(response){ var state = response.getState(); console.log('line 13', state); if (state === "SUCCESS") { component.set('v.Video', response.getReturnValue()); } }); $A.enqueueAction(action); }, afterScriptsLoaded : function(component, event, helper) { imageSliderComponent = component.find('ImageSlider'); console.log('line 23', imageSliderComponent); $(imageSliderComponent.getElement()).slick({ accessibility : true, autoplay : true, dots: true, infinite: true, speed: 300, slidesToShow: 4, adaptiveHeight: true }); $A.util.removeClass(component, 'slds-hide'); },Aura iteration located in the component:
<aura:iteration items="{!v.Video}" var="item"> <figure class="slds-image slds-image--card"> <a href="javascript:void(0);" class="slds-image__crop slds-image__crop--16-by-9"> <img src="{!item.Thumbnail_URL__c}" alt="Description of the image" /> </a> </figure> </aura:iteration>
$A.run(function() : is deprecated.
Alain
All Answers
Did you solve your problem?
I will made some tests but that is quicker when I have more code (version of jQuery and so on).
I have not solved the problem yet, the images are still stacking on top of one another and the carousel is not appearing on the page. The carousel loads without the server call, for example, it loads static resource images. But when it has to make the server call it gets thrown off.
Other people could help you but for very tricky problem like this one, it is better to have almost all the code.
I solved another bizarre problem here: https://developer.salesforce.com/forums/ForumsMain?id=9060G0000005VaQQAU
But no news. That works now and Angello copied/pasted all his (not-)working code so it is much more easier to start.
I have used the standard <lightning:carousel> with scrollDuration="2" seconds
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_carousel.htm
The images come from here: https://trailhead.salesforce.com/en/superbadges/superbadge_lcf
( Install the unmanaged package.)
The Lightning Component Framework Specialist is my favorite Superbadge (really great).
Salesforce has made great progress for its standard components (even if it is beta, it is now often more stable and easier to use than external JS libraries).
Application
Component: :MyCaroussel
Controller JS:
Controller Apex:
Alain
The main reason I am unable to use the standard <lightning:carousel> is that it only supports displaying one image at a time. I need to support 4 images on screen at a time, hence the use of the Slick Carousel.
The solution cannot pull the images from static resources, as the images are hosted on an external system and are referenced using the URL. I attempted implementing your solution but had the same result when using Thumbnail_URL__c coming from a record.
Here's my Apex controller code:
And lightning component:
Above I have posted the component and Apex controller. I'm testing with the component on a community. How did you figure out that ltng:require was not working as necessary and how did you resolve that issue?
JS: jQuery 3.1.1, Slick 1.6
CSS: slick.css & slick-theme.css
JS Controller:
Only <lightning:carousel> works all the time.
jQuery.noConflict(); and jQuery(document).ready(function() are not enough.
Lightning Components: Creating a Carousel Component By Christophe Coenraets (June 15, 2015)
https://developer.salesforce.com/blogs/developer-relations/2015/06/creating-carousel-lightning-component.html
setTimeout(function() {
$A.run(function() { $('.carousel').slick(); });
});
// prevent default "pull-to-refresh" behavior when running in S1
$('.carousel').on("touchmove", function()
{ return false;
});
Alain
$A.run(function() : is deprecated.
Alain
Happy to report that that latest controller code works. Thank you for all of your help! It is much appreciated.
Thanks,
Tim