Topic: Mixing images and videos in caroussel

rhaouari free asked 3 years ago

Expected behavior Hi , Is it possible to mix videos and images in caroussel component. like this

 <mdb-carousel-item (click)="onImageClick($event)" *ngFor="let resource of resources">

            <ng-container *ngIf="resource.isImage">
              <mdb-card-img [src]="resource.url | sanitizeUrl"></mdb-card-img>
            <ng-container *ngIf="resource.isVideo">
              <div class="view">
                <!--Video source-->
                <video class="video-fluid" autoplay>
                  <source [src]="resource.url| sanitizeUrl" type="video/mp4"/>
                <div class="mask rgba-indigo-light waves-light" mdbWavesEffect></div>

doing so i m having an error :

TypeError: Cannot read property 'src' of null
    at CarouselComponent.getImg (ng-uikit-pro-standard.js:2933)
    at CarouselComponent_ol_3_li_1_Template (ng-uikit-pro-standard.js:75)
    at executeTemplate (core.js:11949)
    at refreshView (core.js:11796)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshDynamicEmbeddedViews (core.js:13154)
    at refreshView (core.js:11819)
    at refreshComponent (core.js:13229)
    at refreshChildComponents (core.js:11527)


Grzegorz Bujański staff commented 3 years ago

Hi. Unfortunately I am unable to reproduce this error. Can you show component.ts file and what does the resource object look like?

rhaouari free commented 3 years ago

resource is just a class representing a file that can be an image, a document , or a video export class Resource { url: string; type: ResourceType; order: number; fileName: string; isImage: boolean; isVideo: boolean; } I think the problem is related to carousel with thumbnails , didn't test it with other types of caroussel , i'm usin thumbnails. <mdb-carousel #imagesCarousel [isControls]="true" [class]="'carousel slide carousel-fade'" [type]="'carousel-thumbnails'" [animation]="'slide'">

Grzegorz Bujański staff commented 3 years ago

That's right. the thumbnails option is not available for video carousel.

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