Topic: Do all images in a thumbnail carousel have to be the same aspect ratio?

krakow47 free asked 4 years ago

Do all images have to have the same aspect ratio when using thumbnail carousels?

When I use an image with an aspect ratio 1:1 and then some 16:9 images, the component doesn't respond well.

Previous and next buttons are in the incorrect positions and the thumbnail images are miles below the carousel image when you go to a 16:9 image from an 1:1 image.

Code example


 public images : IImage[] = [
    src: ''
    src: ''
    src: ''



<mdb-carousel class="carousel slide carousel-fade" [type]="'carousel-thumbnails'" [animation]="'fade'">
            <mdb-carousel-item *ngFor="let tempImage of images">
                <img class="d-block w-100" src={{tempImage.src}}>

Konrad Stępień staff answered 4 years ago

Hi @krakow47,

Thank you for report the bug. We will look up closer to this problem and we will try to fix it as soon as possible.

Can you provide me with a code? I will try to help you. For example, sets max-height and max-width styles for your file styles.scss.

Best, Konrad.

krakow47 free commented 4 years ago

I updated with code examples.

Thanks, I'll test your suggestions and see if it works.

Konrad Stępień staff commented 4 years ago

one solution sets these styles in your project

.carousel-item {
    display: none !important;
    &.active {
        display: block !important;

Then if you change the image the thumbnail jump always to bottom of the image

And another way is sets styles what I mentioned above

.carousel-item {
    img {
        max-width: 100vw;
        max-height: 600px;
        object-fit: contain;

Please try these styles in your project and tell me if everything works correctly.

Best, Konrad.

krakow47 free commented 4 years ago

Thank you for these solutions, I will try it out during the day. I appreciate the help!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: Desktop
  • Browser: Mozilla Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No