Big gap between thumbnails bar and image in carousel with di


Topic: Big gap between thumbnails bar and image in carousel with different image height

rhaouari asked 4 years ago

Hello

In the Thumbnails carousel pro component 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. the expected behavior would be that the Thumbnails bar would be below the image container with a slight padding what ever the image size.

<div class="container">
  <div class="row">
    <div class="col-8 d-flex justify-content-center">
      <mdb-carousel *ngIf="resourceList.length > 0" #imagesCarousel [isControls]="true"
                    [class]="'carousel-fade'"
                    [type]="'carousel-thumbnails'"
                    (activeSlideChange)="onActiveSlideChange($event)"
                    [animation]="'fade'">
        <!--First slide-->
        <mdb-carousel-item *ngFor="let resourceItem of resourceList" class="p-1">


            <div class="row align-items-center">
              <div class="col d-flex justify-content-center">
                <figure>
                  <img width="470" class="img-fluid rounded" [src]="resourceItem.url">
                </figure>
              </div>
            </div>

        </mdb-carousel-item>

      </mdb-carousel>
    </div>
    <div class="col-4">
      <div  [class]="
                    'm-1 p-2 border rounded border-secondary'">
        <a *ngFor="let otherResourceItem of otherResourceList; let i=index;" (click)="addImage(otherResourceItem.id)">
          <img [src]="otherResourceItem.url"
               [class]="'img-thumbnail border-warning'"
               [style]="'width: 50px'">
        </a>
      </div>

    </div>
  </div>
</div>
import {Component, OnInit, ViewChild} from '@angular/core';
import {CarouselComponent} from 'ng-uikit-pro-standard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('imagesCarousel', {static: false}) imagesCarousel: CarouselComponent;

  title = 'ng-uikit-pro-standard';

  resourceList: Array<ResourceItem> = [
    {id: 0, url: 'https://images.unsplash.com/photo-1591619488631-426aa7293534?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2242&q=80'},
    {id: 1, url: 'https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_398/reconnect_with_nature.jpg?'},
    // tslint:disable-next-line:max-line-length
    {
      id: 2,
      url: 'https://www.spain.info/export/sites/segtur/.content/imagenes/destacados-homes-cuadrados/mirador-galiana-ucero-soria-c-alberto-frias-u1195950.jpg'
    },
    // tslint:disable-next-line:max-line-length
    {
      id: 3,
      url: 'https://www.visitcentroamerica.com/wp-content/uploads/2017/08/central-america-native-protected-spaces-nature-reserves-park-national-volcanoes-salvador-800x800.jpg'
    },
    // tslint:disable-next-line:max-line-length
    {id: 4, url: 'https://pteproductions.com/wp-content/uploads/2017/02/landscape14-800x800.jpg'},
    {id: 5, url: 'https://spfcanyon.com/images/uploads/_ansel_image_cache/3c957ac47ff881b2b1027d054d67d806.jpg'}];


  otherResourceList: Array<ResourceItem> = [
    {id: 6, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKVbtH4hJQLGYG_6mfVHABen7ITmZwMMbSUA&usqp=CAU'},
    // tslint:disable-next-line:max-line-length
    {
      id: 7,
      url: 'https://pi.tedcdn.com/r/talkstar-assets.s3.amazonaws.com/production/playlists/playlist_30/natural_wonder.jpg?quality=89&w=800'
    },
    // tslint:disable-next-line:max-line-length
    {id: 8, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTrUNEl9KJwRd3UrAdFwAaR1-sB6ahZVeniEg&usqp=CAU'},
    // tslint:disable-next-line:max-line-length
    {id: 9, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFDYsIxNvFpFUmUW-uPlAwXwNaAT5BHulqQQ&usqp=CAU'},
    {id: 10, url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSouUzXWhv1-tleZv1oFyHx9xuO_zxmpD6sVw&usqp=CAU'}];

  constructor() {
  }

  ngOnInit() {

  }

  onActiveSlideChange($event) {
  }

  addImage(i: number) {
    console.log('adding image with id ' + i);
    // setTimeout(() => {
    if (this.resourceList.length > 5) {
      this.resourceList = this.resourceList.filter(res => res.id <= 5);
    }
    this.resourceList.push(this.otherResourceList.find(or => or.id === i));

    this.imagesCarousel.selectSlide(i - 1);
    // this.detectChanges(this.cdRef);
    // }, 1000);


  }
}
export class ResourceItem {
  id: number;
  url: string;
}

Arkadiusz Idzikowski staff commented 4 years ago

@rhaouari Thank you for the example code, we will take a closer look at this problem. Unfortunately, there is no easy workaround for now, we will probably need to slightly change the HTML structure of the component.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Desktop
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No
Tags