Topic: Carousel thumbnails stretch beyond main image
Hi, I'm trying using the mdb-pro carousel with thumbnails, but the thumbnail bar is stretching beyond the width of the main image block when there is a larger number of images (see linked image).
Ideally I'd like the width of the thumbnail bar clipped to the width of the image block (the blue outline in the attached image). For the thumbnail images to wrap around, and for the current thumbnail to remain in the middle. Is that possible with the out of the box components? If not, can you suggest how I might attempt it?
html:
<mdb-carousel [isControls]="true" class="carousel slide carousel-fade" [type]="'carousel-thumbnails'" [animation]="'slide'" [keyboard]="true">
<mdb-carousel-item *ngFor="let image of images">
<div class="w-100 centreImage">
<img class="imgMaxHeight" [src]="image">
</div>
</mdb-carousel-item>
</mdb-carousel>
scss override to make portrait and landscape images the same height.
.img-fluid {
max-height: 60px;
}scss to make portrait and landscape images the same height and to center the portrait images.
.imgMaxHeight {
max-height: 600px;
}
.centreImage {
display: flex;
justify-content: center;
align-items: center;
}
Hello,
I cannot access the screenshot you provided. Could you upload it somewhere else?
Regards,
Arek
TinCanKnits pro commented 6 years ago
I've added an external link to my original post.
Thanks
Arkadiusz Idzikowski staff commented 6 years ago
Thank you. We will take a closer look at this problem.
Hello , is there a solution to this problem ? thanks
Arkadiusz Idzikowski staff commented 4 years ago
@rhaouari we have recently received information that the problem with thumbnail styles still occurs, but only in certain cases. Please provide an example HTML/TS that you use to render the component, so we can reproduce the problem on our end.
rhaouari commented 4 years ago
Sorry i mistaken the problem , my problem is different , when i have image with different height when an image with the smaller height is selected there is a big white gap between the thumbnails bar and the image.
Arkadiusz Idzikowski staff commented 4 years ago
@rhaouari can you create a new thread and add a simple example on which we will be able to reproduce that?
rhaouari commented 4 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 6.2.3
- Device: pc
- Browser: chrome
- OS: windows
- Provided sample code: Yes
- Provided link: Yes