[SalesForce] How to open a url in new tab from lightning component

I have a carousel image component and when user clicks on the image, it should open the associated url in new tab. Currently the lightning:carouselImage "href" opens url in same window.

I am trying to call onClick action from image to open url in new window, but unable to succeed in it. In the below I replaced href = "{!l.imgUrl__c}" with href = "{!c.onClick}" and trying to pass imgUrl__c value to onClick function in controller. I tried to see the value in console log but nothing is coming for var urlval.

Component:

<lightning:carousel disableAutoScroll="false">
                    <aura:iteration items="{!v.recordList}" var="l">
                        <lightning:carouselImage src = "{!l.image__c}" 
                        header = "{!l.Header}" description = "{!l.Description}" 
                        alternativeText = "{!l.AlterText}" onClick = "{!c.onClick}">
                        </lightning:carouselImage>
                    </aura:iteration>
                  </lightning:carousel> 

Component Controller:

onClick: function(component, event, helper){
var urlval = component.get("v.cards")[index].imgUrl__c;
window.open(urlval, '_blank');
}

Best Answer

You should use onclick and not href for this purpose. You can use below:

<lightning:carouselImage src = "{!l.image__c}" 
                    header = "{!l.Header}" description = "{!l.Description}" 
                    alternativeText = "{!l.AlterText}" onclick="{!c.onClick}">
                    </lightning:carouselImage>