Mixing images and videos in caroussel

Topic: Mixing images and videos in caroussel

rhaouari free asked 4 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">

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

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)

Regards.

Grzegorz Bujański staff commented 4 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 4 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'">

Please insert min. 15 characters.

Grzegorz Bujański staff commented 4 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

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

rhaouari

75Support score
9Questions 3Answers 0Snippets