typescript - Problem with using angular material-carousel slider with image

Question

I'm tring to build carousel with images in angular.
I did it acoording to this link: https://therichpost.com/angular-9-material-carousel-slider/.
but it doesnt work.
the problem is that it shows only the first image.
This is the code:

home.component.html

   <mat-carousel
        timings="250ms ease-in"
        [autoplay]="true"
        interval="5000"
        color="accent"
        maxWidth="auto"
        proportion="25"
        slides="5"
        [loop]="true"
        [hideArrows]="false"
        [hideIndicators]="false"
        [useKeyboard]="true"
        [useMouseWheel]="false"
        orientation="ltr">
    
        <mat-carousel-slide
            #matCarouselSlide
            *ngFor="let slide of slides; let i = index"
            [image]="slide.image"
            overlayColor="#00000040"
            [hideOverlay]="false">
        </mat-carousel-slide>
    </mat-carousel>

home.component.ts

  slides = [
    {'image': 'https://image.freepik.com/free-photo/chalk-board-sketch-with-loudspeaker-phrase-we-need-volunteers_78790-1167.jpg'}, 
    {'image': 'https://image.freepik.com/free-photo/together-we-can-help-concept_23-2148733265.jpg'}, 
    {'image': 'https://image.freepik.com/free-photo/people-old-woman-young-hand-care-holding-healthcare-disabled-walking-with-assistance_36325-2363.jpg'},
    {'image': 'https://image.freepik.com/free-photo/pupils-reading-book-classroom_1150-3859.jpg'}, 
    {'image': 'https://image.freepik.com/free-photo/group-multiethnic-diverse-hands-raised_53876-64967.jpg'}];

Can you help me and find the mistake?
Thank you so much!!

question from:https://stackoverflow.com/questions/65904423/problem-with-using-angular-material-carousel-slider-with-image

Answer 1

Checkout this working fiddle I created using above details and it works.

stackblitz