igniteui-angular-samples/src/app/layouts/carousel/carousel-animations-sample/carousel-animations-sample.component.html at b44c2bdcb634f06b363822f0d5f03ecb2f089fac · IgniteUI/igniteui-angular-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="carousel-wrapper">
  <div class="action-wrapper">
    <div class="action">
      <span>Animation type</span>
      <igx-select #select [type]="'border'" [(ngModel)]="carousel.animationType">
        @for (animation of animations; track animation) {
          <igx-select-item [value]="animation">
            {{animation | titlecase}}
          </igx-select-item>
        }
        </igx-select>
    </div>
    <div class="action">
      <igx-switch labelPosition="before" [(ngModel)]="carousel.vertical">Vertical alignment</igx-switch>
    </div>
  </div>
  <igx-carousel #carousel [indicators]="false">
    @for (slide of slides; track slide) {
      <igx-slide>
        <div class="slide-wrapper">
          <igx-card>
            <igx-card-header>
              <h3 igxCardHeaderTitle>{{slide.heading}}</h3>
            </igx-card-header>
            <igx-card-content>
              <p>{{slide.description}}</p>
            </igx-card-content>
            <igx-card-media>
              <img [src]="slide.image">
            </igx-card-media>
            <igx-card-actions>
              <a igxButton href="{{slide.link}}" target="_blank" rel="noopener" igxStart>visit page</a>
            </igx-card-actions>
          </igx-card>
        </div>
      </igx-slide>
    }
  </igx-carousel>
</div>