function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Rajni Bala 2Rajni Bala 2 

Removing white space (content space) from lightning crousel

Hi Friends,

I am implementing image crousel in lightning component but do not want slds-carousel__content (which displays description and title etc) I want to show the full image on crousel.

Is there any way that i can remove the white space from the bottom of the image?

Thanks
Rajni Bala 2Rajni Bala 2
please see the snapshot.
Marcio_FritschMarcio_Fritsch
I am also facing this and so far I did not get to solve it. What I know is we should remove the tag below:

User-added image
RajnisfRajnisf
I was able to do that after small change in css of this tag -- visibility:hidden
Marcio_FritschMarcio_Fritsch
So, even changing the css file I did not get it. Can you please post here Rajnisf?
Aman Kumar 278Aman Kumar 278

Hi Marcio,

Probably you have solved your issue till now but I am posting the answer so anyone else face the same issue can get help from this.

So, to remove white space from Carousel in aura you just need to use the display property in css file.

.THIS .content-container {
    display: none;
}

It will hide the content container.

Thanks.
Bachu Eswar SaiBachu Eswar Sai
Hi Aman, 
Do you know how to remove this content container in lwc, Thanks.
Joaquin TronconeJoaquin Troncone
In the JS:
renderedCallback() {
        const style = document.createElement('style');
        style.innerText = `.slds-carousel__content {
            display: none;
        }`;
        this.template.querySelector('lightning-carousel').appendChild(style);
    }