是否可以使用 angular material 构建图像轮播？

Question

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

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

Answer 1

这是example给你的

<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

<div class="demo-carousel" style="background-color: rgb(90, 85, 85)">
  <mat-carousel #matCarousel [timings]="timings" [autoplay]="autoplay" [interval]="interval" [loop]="loop"
    [hideArrows]="hideArrows" [hideIndicators]="hideIndicators" [color]="color" [maxWidth]="maxWidth"
    [proportion]="proportion" [useKeyboard]="useKeyboard" [useMouseWheel]="useMouseWheel" [orientation]="orientation"
    [slides]="slides" (change)="onChange($event)" class="display: flex; justify-content: flex-end">
    <mat-carousel-slide *ngFor="let slide of slides; let i = index">
      <ng-container class='cardImg'>
        <div
          style="width: 75%; height: 75%; display: flex; flex-direction: row; align-items: center; justify-content: space-around;">
          <mat-card *ngFor="let image of slide" class="img">
            <img [src]="image.image">
          </mat-card>
        </div>
      </ng-container>
    </mat-carousel-slide>
  </mat-carousel>
</div>

添加到app.module

imports: [
  BrowserModule,
  AppRoutingModule,
  MatCarouselModule,
  MatIconModule,
  MatButtonModule,
  BrowserAnimationsModule,
  MatCardModule
]

添加到 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%;
}

I have modified and simplified the code in https://github.com/gbrlsnchs/material2-carousel . For further clarifications use that sample.enter image description here

Answer 3

试试这个 code 添加 Angular Material 轮播 Angular 10/11

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 { }

更新 Ts 文件

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

HTML 文件

<h1>How To Add Angular Material Carousel Angular 10/11 - phpcodinstuff.com</h1>
  
<mat-carousel
  timings="250ms ease-in"
  [autoplay]="true"
  interval="6000"
  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>

使用 @ngmodule/material-carousel library.

是否可以使用 angular material 构建图像轮播？

Is it possible to build an image carousel using angular material?

carousel

angular-material

angular