Topic: Mixing images and videos in caroussel
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.
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
Related topics
Grzegorz Bujański staff commented 4 years ago
Hi. Unfortunately I am unable to reproduce this error. Can you show
component.tsfile and what does the resource object look like?rhaouari 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'">Grzegorz Bujański staff commented 4 years ago
That's right. the thumbnails option is not available for video carousel.