Topic: Carousel thumbnails stretch beyond main image

TinCanKnits pro asked 5 years ago

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).

thumbnail issue

external image link

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?



<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">

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;

rhaouari free answered 3 years ago

Hello , is there a solution to this problem ? thanks

Arkadiusz Idzikowski staff commented 3 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 free commented 3 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 3 years ago

@rhaouari can you create a new thread and add a simple example on which we will be able to reproduce that?

rhaouari free commented 3 years ago

here is

Arkadiusz Idzikowski staff answered 5 years ago


I cannot access the screenshot you provided. Could you upload it somewhere else?



TinCanKnits pro commented 5 years ago

I've added an external link to my original post.


Arkadiusz Idzikowski staff commented 5 years ago

Thank you. We will take a closer look at this problem.

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