0

I create a component with the lightning carousel and I want to remove the border around the image, but I don't know how. I tried a lot of different codes, but nothing help. See my screen below.

I tried with the css command - border: none; border: 0px; border-color: white;

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    
<div class="slds-box slds-box_x-small slds-text-align_center" style="background-color: white;">    
    <lightning:carousel disableAutoRefresh="false" disableAutoScroll="false">
        <lightning:carouselImage
            src = "https://myDomain--XXX--c.visualforce.com/resource/1606383867000/XXX?"
            header = "the header of 1"
            description = "the decription of 1"
            alternativeText = ""
            href = "https://www.salesforce.com">
        </lightning:carouselImage>
        <lightning:carouselImage
            src = "http://www.picurl.com"
            header = "Titel2"
            description = ""
            alternativeText = ""
            href = "">
        </lightning:carouselImage>
        <lightning:carouselImage
            src = "https://www.picurl.com"
            header = ""
            description = ""
            alternativeText = ""
            href = "">
        </lightning:carouselImage>
    </lightning:carousel>
</div>

</aura:component>

.THIS img {
    object-fit: contain;  
    background-color: white;  
    border: none; 
    outline: none;
}

image of carousel

1 Answer 1

1

You have to inspect the page and see which property is causing those lines to appear and which class those properties are added.anyway you can add following css in your component

.THIS .slds-carousel__panel-action {
    
    border: none;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .