Question

我正在尝试使用角形材料开发图像轮播，但找不到任何有用的资源。

我尝试了https://github.com/gbrlsnchs/material2-carousel，但是没有用，代码很复杂。

Answer 1

<ng-template #slide let-slide>
    <div [ngStyle]="{
      'background-size': 'cover',
      'background-image': 'url(' + slide.url + ')',
      'background-repeat': 'no-repeat',
      'width': '100%',
      'height': '100%'
    }">
    </div>
</ng-template>
<ng-template #thumbnail let-slide>
        <div [ngStyle]="{
        'background-size': 'cover',
        'background-image': 'url(' + slide.url + ')',
        'background-repeat': 'no-repeat',
        'background-position': 'center center',
        'width': '100%',
        'height': '100%'
      }"></div>
</ng-template>

Answer 2

这有效。

添加到ts

public slidesList = new Array<never>(5);
  public showContent = false;
  public listKeyManager: ListKeyManager<any>;
  public timings = '300ms ease-in';
  public autoplay = true;
  public interval = 4000;
  public loop = true;
  public hideArrows = true;
  public hideIndicators = false;
  public color: ThemePalette = 'accent';
  public maxWidth = 'auto';
  public proportion = 10;
  public images = [
    {
      image: '../assets/img1.jfif'
    }
  ];
  public slides: any = this.chunk(this.images, 3);
  // public overlayColor = '#f5f5f5';
  public hideOverlay = false;
  public useKeyboard = true;
  public useMouseWheel = false;
  public orientation: Orientation = 'ltr';
  public log: string[] = [];

  chunk(arr, chunkSize) {
    let R = [];
    for (let i = 0, len = arr.length; i < len; i += chunkSize) {
      R.push(arr.slice(i, i + chunkSize));
    }
    return R;
  }

  public onChange(index: number) {
    this.log.push(`MatCarousel#change emitted with index ${index}`);
  }
  public get currentIndex(): number {
    if (this.listKeyManager) {
      return this.listKeyManager.activeItemIndex;
    }

    return 0;
  }

添加到html

        <mat-card *ngFor="let image of slide" class="img">
          <img [src]="image.image">
        </mat-card>
      </div>
    </ng-container>
  </mat-carousel-slide>
</mat-carousel>

添加到app.module

进口：[ BrowserModule， AppRoutingModule， MatCarouselModule， MatIconModule， MatButtonModule， BrowserAnimationsModule， MatCard模块 ]

添加到scss

/* You can add global styles to this file, and also import other style files */

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import "~@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$demo-primary: mat-palette($mat-cyan);
$demo-accent: mat-palette($mat-light-green, A200, A100, A400);

// The warn palette is optional (defaults to red).
$demo-warn: mat-palette($mat-pink);

// Create the theme object (a Sass map containing all of the palettes).
$demo-light-theme: mat-light-theme($demo-primary, $demo-accent, $demo-warn);
$demo-dark-theme: mat-dark-theme($demo-primary, $demo-accent, $demo-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($demo-light-theme);

.demo-dark-theme {
  @include angular-material-theme($demo-dark-theme);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}
.img{
  margin:50px;
  justify-content: space-around;
}
.cardImg{
  object-fit: cover;
  max-height: 10%;
  max-width: 33%;
}

我已经修改并简化了https://github.com/gbrlsnchs/material2-carousel中的代码。要进一步说明，请使用该示例。enter image description here

Answer 3

试试这个 code 添加 Angular Material Carousel Angular 10/11

from typing import cast

...

obj_c = cast(value, C)

更新 Ts 文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; //---------  Important
import { MatCarouselModule } from '@ngmodule/material-carousel'; // ---------- Important
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule, // ---------- Important
    FormsModule,
    ReactiveFormsModule,
    MatCarouselModule.forRoot() // ---------- Important
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML 文件

import { Component } from '@angular/core';
import { MatCarousel, MatCarouselComponent } from '@ngmodule/material-carousel'; // -------- important
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  
export class AppComponent {
  
  slides = [
      {'image': 'https://picsum.photos/seed/picsum/1200/300'}, 
      {'image': 'https://picsum.photos/seed/picsum/1200/300'},
      {'image': 'https://picsum.photos/seed/picsum/1200/300'}, 
      {'image': 'https://picsum.photos/seed/picsum/1200/300'}, 
      {'image': 'https://picsum.photos/seed/picsum/1200/300'}
    ];
      
}

使用 @ngmodule/material-carousel library。

是否可以使用角形材质构建图像轮播？

3 个答案: