set swiperSlide height: auto using the angular package

[onmax]

Hey guys,

I just recently start using Swiper with Angular although I am not new to Swiper. Right now I have a project were I have the following swiper component:

<swiper class="font-sans w-full flex-1" [allowTouchMove]="false">
        <!-- First slide -->
        <ng-template class="flex flex-col overflow-auto" swiperSlide>
         
        <!-- More slides -->
</swiper>

Everything until this point works perfectly fine as expected. The problem is that I want to change the property of the div.swiper-slide to height: auto instead of height: 100% which is the default value. I tried using style="height: auto !important" or using a class with .swiper-slide__h-auto { height: auto !important } but nothing works because I cannot overwrite the CSS property.

Here I show a picture where the height property is not being overwritten:
HTML:

<!-- First slide -->
        <ng-template class="h-full flex flex-col overflow-auto" swiperSlide>

Any ideas?

[nolimits4web]

Apparently it happens because of the order how your CSS included. Or just add custom class to swiper-slide with height: auto !important

[nolimits4web]

Or make sure your CSS files included AFTER swiper's styles

[onmax]

Yeah, I think I am stupid. I didn't thing about that. It should've been the first thing to check. Thanks for the quick response. And also, I want to thank you for the great job you have done with swiper, I have use it in some many websites!!!