Topic: Carousel Component Error with dynamic image List

rhaouari free asked 1 year ago


Hi , I'm using the pro carousel component , and i have a specific need to make the list of the viewable images dynamic:

suppose we have a product page with an image carousel , when the page is opened i only have 5 image but the product has lets say more than 10 colors and textures , and the user can select them from an option list , putting more than 10 images in the thumbnail carousel makes it ugly so i managed to put initial 5 images only and add the desired image dynamically but always in the images list i only have 6 images at most .it works but sometimes i see this error :

TypeError: Cannot set property 'directionNext' of undefined at CarouselComponent.fadeAnimation (ng-uikit-pro-standard.js:3067)the sliding is implemented manually :

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


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

and the carousel freezes , unable to click on thumbnails or slide or wathever .is the carousel component usable with dynamic image list ? do i need to reset the carousel component when adding a new image entry by calling some method ?

Thank you.


Arkadiusz Idzikowski staff commented 1 year ago

Could you please add some example HTML/TS code showing this use case so we can recreate it on our end?


rhaouari free commented 1 year ago

thank your for your reply , i updated the post


Arkadiusz Idzikowski staff commented 1 year ago

Thank you for the update. We have recreated the problem on our end but still need some time to find out what is causing it.


rhaouari free commented 1 year ago

Hello , any updates on this issue , is there a workaround ? thanks.


Arkadiusz Idzikowski staff commented 1 year ago

@rhaouari The issue has not been fixed yet. We will let you know when the update will be ready. Unfortunately, there is no easy workaround for now, because it is something we need to fix on our end.


vinicius ribeiro free commented 5 days ago

After a year apparently there is still no solution to the problem. My solution was to use another carousel, primeNg, it worked wonderfully in angular projects


Arkadiusz Idzikowski staff commented 5 days ago

There were many changes in the component since v9.3.1 but it looks like the problem still occurs in the latest version. I added a task with higher priority to our to-do list and we will check that again.



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

  • 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