You need to sign in to do that
Don't have an account?
Jonathan Wolff 7
Second description for carousel:image section
Hello, I build a lightning carousel with slds code. Now I would like to add a second description for every page. Could you tell me how it can be achived. The second description should display under the first description but with another color, so thats why I can't use the normal description field:
COMP
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="imagelink1" type="String"/>
<aura:attribute name="header1" type="String"/>
<aura:attribute name="link1" type="String"/>
<aura:attribute name="description1" type="String"/>
<aura:attribute name="alternativetext1" type="String"/>
<div class="slds-box slds-box_x-small slds-align_absolute-center" style="background-color: white;">
<lightning:carousel disableAutoRefresh="false" disableAutoScroll="false">
<lightning:carouselImage
src = "{!v.imagelink1}"
header = "{!v.header1}"
description = "{!v.description1}"
alternativeText = "{!v.alternativetext1}"
href = "{!v.link1}">
</lightning:carouselImage>
</lightning:carousel>
</div>
</aura:component>
Design
<design:component label="Cockpit_Carousel">
<design:attribute name="imagelink1" label="Image Link1" description="Provide the image 1 url here"/>
<design:attribute name="header1" label="Header 1" description="Provide the header 1 here"/>
<design:attribute name="link1" label="Link 1" description="Provide the Link 1 here"/>
<design:attribute name="description1" label="Description 1" description="Provide the Description 1 here"/>
<design:attribute name="alternativetext1" label="Alternative Text 1" description="Provide the Alternative Text 1 here"/>
</design:component>
COMP
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="imagelink1" type="String"/>
<aura:attribute name="header1" type="String"/>
<aura:attribute name="link1" type="String"/>
<aura:attribute name="description1" type="String"/>
<aura:attribute name="alternativetext1" type="String"/>
<div class="slds-box slds-box_x-small slds-align_absolute-center" style="background-color: white;">
<lightning:carousel disableAutoRefresh="false" disableAutoScroll="false">
<lightning:carouselImage
src = "{!v.imagelink1}"
header = "{!v.header1}"
description = "{!v.description1}"
alternativeText = "{!v.alternativetext1}"
href = "{!v.link1}">
</lightning:carouselImage>
</lightning:carousel>
</div>
</aura:component>
Design
<design:component label="Cockpit_Carousel">
<design:attribute name="imagelink1" label="Image Link1" description="Provide the image 1 url here"/>
<design:attribute name="header1" label="Header 1" description="Provide the header 1 here"/>
<design:attribute name="link1" label="Link 1" description="Provide the Link 1 here"/>
<design:attribute name="description1" label="Description 1" description="Provide the Description 1 here"/>
<design:attribute name="alternativetext1" label="Alternative Text 1" description="Provide the Alternative Text 1 here"/>
</design:component>
Yes, It is possible to have second description in SLDS carousel and also you can style it as required. But in LIghtning:carouselImage, we cannot have it.
So, I would suggest you to use SLDS carousel.
https://www.lightningdesignsystem.com/components/carousel/
Thanks
Surya G