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?

 

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;
}

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 https://mdbootstrap.com/support/angular/big-gap-between-thumbnails-bar-and-image-in-carousel-with-different-image-height/


Arkadiusz Idzikowski staff answered 5 years ago


Hello,

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

Regards,

Arek


TinCanKnits pro commented 5 years ago

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

Thanks


Arkadiusz Idzikowski staff commented 5 years ago

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



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

  • 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