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 5 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: '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>

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

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 5 years ago

I updated with code examples.

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

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

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

Add comment

Write

Create snippet

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

krakow47

55Support score
8Questions 1Answers

0Snippets likes 0Snippets