Topic: Set Maximum Height for Carousel
junior5417 pro asked 6 years ago
Damian Gemza staff answered 5 years ago
Dear @carlosalviz
I have used an image with 2592x1728 size, and with the below .scss code, my carousel looks fine:
.html:
<div class="container my-5">
<mdb-carousel class="carousel slide carousel-fade" [type]="'carousel-thumbnails'" [animation]="'fade'">
<mdb-carousel-item>
<img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley%2C_California.jpg" alt="First slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley%2C_California.jpg" alt="Second slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley%2C_California.jpg" alt="Third slide">
</mdb-carousel-item>
</mdb-carousel>
</div>
.scss:
.carousel-inner {
max-height: 400px;
img {
max-height: 400px;
}
}
.carousel-indicators img {
max-width: 100px;
}
Please take a look at this screenshot.
Best Regards,
Damian
carlosalviz free commented 5 years ago
Tks. It only worked including a max-height in the css
.carousel-indicators img { max-height: 67px; max-width: 100px; }
carlosalviz free answered 5 years ago
I-m already using the last version (7.5.1).
It-s just a component with that code.
Maybe you have to use bigger images to reproduce it.
(that-s why we had to use the css you mentioned in this post. Dont forget to include it)
My size says 3456 x 4608. Please confirm
Damian Gemza staff answered 5 years ago
Dear @carlosalviz
How can I reproduce your problem? I have tried to reproduce it with code from our docs, but without success - for me, there's no such problem.
Could you please provide me with reproduction steps with which I'll be able to track your problem? Also please specify, which version of MDB Angular you're using.
Maybe you should try to update to the latest one (7.5.1)?
Best Regards,
Damian
carlosalviz free answered 5 years ago
Here-s my issue related to this case
Code is the same u have in the page:
<mdb-carousel class="carousel slide carousel-fade" [type]="'carousel-thumbnails'" [animation]="'fade'">
<mdb-carousel-item>
<img class="d-block w-100" src="/assets/prods/IMG_20180610_115144.jpg" alt="First slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="/assets/prods/pruebacollar.jpg" alt="Second slide">
</mdb-carousel-item>
<mdb-carousel-item>
<img class="d-block w-100" src="/assets/prods/IMG_20180610_115942.jpg" alt="Third slide">
</mdb-carousel-item>
</mdb-carousel>
And I included the css style you mentioned. That-s all.
Arkadiusz Idzikowski staff answered 6 years ago
.carousel-inner { max-height: 400px; img { max-height: 400px; } }Regards, Arek
carlosalviz free commented 5 years ago
Hi Arkadiusz, I also wanted to change the size of the img inside a mdb-carousel; but then, using your suggestion it changes the Big Image, but the little ones got crazy. They are now showing over the big one. (a part of the little image is now over the big one)
Is there a way to fix that? (I-m using Thumbnails carousel)
tks,
Arkadiusz Idzikowski staff commented 5 years ago
Hello,
Could you provide some screenshots and example code on which I will be able to debug this problem?
carlosalviz free commented 5 years ago
Sure, I've just added that in the comments below.
Tks
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.2
- Device: Mac
- Browser: Chrome
- OS: OSX
- Provided sample code: No
- Provided link: No