Carousel thumbnails stretch beyond main image

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

Add comment

rhaouari free answered 3 years ago

0 0 Best answer

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/

Add comment

Arkadiusz Idzikowski staff answered 5 years ago