Do all images in a thumbnail carousel have to be the same as


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

krakow47 asked 2 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

TS

 public images : IImage[] = [
{
    src: 'https://firebasestorage.googleapis.com/v0/b/trade-magnet-5b8a6.appspot.com/o/watch-1168832_1280.jpg?alt=media&token=c238fd8d-ee6f-48ab-8dfc-a0363676ae8a'
},
{
    src: 'https://firebasestorage.googleapis.com/v0/b/trade-magnet-5b8a6.appspot.com/o/citizen-3572288_1280.jpg?alt=media&token=906c9cec-d20f-432e-b443-0842ccc35587'
},
{
    src: 'https://firebasestorage.googleapis.com/v0/b/trade-magnet-5b8a6.appspot.com/o/wrist-watch-2855238_1280.jpg?alt=media&token=6258634c-ffe7-4bde-8bbd-6dd9a73b65eb'
}

];

HTML

<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}}>
            </mdb-carousel-item>
          </mdb-carousel>

Konrad Stępień staff answered 2 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 commented 2 years ago

I updated with code examples.

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


Konrad Stępień staff commented 2 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 commented 2 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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