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 nothref
for this purpose. You can use below: