How can I edit .carousel__slide css?

[tohedul]

Hi, I want to edit/customise 'carousel__slide' css class. How can I do that? Suppose I want to set padding left and right 0 of carousel__slide. Also if I don't want to show bullet points, how can I do that? There aren't any property for that.

[marcreichel]

Hi,

you can edit the .carousel__slide css by simply styling it in your css. Just make sure you use !important. So for example:

.carousel__slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

would work. But you got a point here. I will definitely improve on this as !important is not a friendly solution. 😅

For hiding the bullets there is an option though. By setting [bullets] to false the bullets disappear.

<angular-carousel [bullets]="false">
    <!-- ... --->
</angular-carousel>

[marcreichel]

@tohedul So, I've just released v2.0.0 of this package which makes it easier to adjust the styling of the carousel. No !important needed anymore 🎉 . Please refer to the updated docs for further instructions.

Let me know if this helps you 🙂

[tohedul]

Hello @marcreichel, Earlier I tried to override carousel__slide class but It didn't work. Now I just tried your latest package. It breaks down the whole carousel. All the carousel images are showing vertically and carousel totally broke down. Please check on your code.

[marcreichel]

Yeah, this is because you've installed a major release which had some breaking changes (which is why it was a major release). Please refer to the updated docs. You need to import the new main.css file into your css where you also import one of the themes. In between you can set your .carousel__slide stylings (without !important).

[tohedul]

There aren't any main.css in your package. How can I import that

[marcreichel]

My bad, it was missing from the published package indeed. I've fixed it with version 2.0.1.

[tohedul]

Now it's working. Though I can't override CSS on my component CSS file, I have to override in global style.css. Which sometimes can be a problem if I'm going to use carousel in multiple components with different carousel config. Btw Thankyou @marcreichel.
You can also add z-index text with shadow and routerLink on carousel's image.
If you make those changes and updates, I hope it can be the most useful and popular carousel package.

[marcreichel]

This is a limitation due to view encapsulation in Angular. If you want to style the carousel from within your component css file you'll need to set encapsulation to ViewEncapsulation.None inside your component ts file. This way you'll be able to overwrite the styles.
Another solution would be to set encapsulation to ViewEncapsulation.ShadowDom and @import the package css files in the component css file but this way all (other) elements inside your component would not be styled using your global styles.css.
So it depends on your use case.

I will think about your suggestions and on how to implement them 👍🏼 Thank you for your suggestions 🙂

Thank you for your kind words 🙂 If you like you can give this repo a star in order to support my work 🙂 I'd really appreciate it 🙂