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:

// 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>

 

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:

// 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>