Question

我正在尝试使用角度图像构建轮播。
我是根据此链接完成的：https://therichpost.com/angular-9-material-carousel-slider/。
但它不起作用。
问题是它只显示第一张图片。
这是代码：

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'}];

你能帮我找出错误吗？
非常感谢！！

Answer 1

检查我使用上述详细信息创建的这个工作小提琴并且它有效。

stackblitz

使用带有图像的角度材料轮播滑块的问题

1 个答案: