用于角材料的多项目响应轮播答案

【问题标题】：multi-item responsive carousel for angular material用于角材料的多项目响应轮播
【发布时间】：2017-10-28 03:57:15
【问题描述】：

我正在尝试在 AngularJS 中创建一个多项目响应式滑块。我熟悉 Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/) 和 Slick Slider (http://kenwheeler.github.io/slick/)，但两者都使用 jQuery，我想要没有 jQuery 的东西。

请建议任何指令或滑块，或任何其他简单的方法。

我想实现如下输出：

谢谢！

【问题讨论】：

这个你实现了吗？

标签： angularjs slider carousel responsive angularjs-material

【解决方案1】：

我创建了github 上可用的多项目轮播

可以看demohere

【讨论】：

【解决方案2】：

@威廉：

您可以使用angular carousel，这与猫头鹰轮播非常相似。

这是用于演示的link。

希望这对你有帮助。

【讨论】：

感谢您的快速回复，但我认为您提到的轮播不是多项目
@WilliamScott：是的，这不适用于多项目。但看看我发现了什么。有人使用很少的定制来制作多项目。如果对您有帮助，请检查一次plnkr.co/edit/oVRYCfaMeRW5a54nzmem?p=preview

【解决方案3】：

我也在寻找一个简单的解决方案，发现了这个：

https://github.com/lifelynl/angular-carousel

正如承诺的那样，它简单通用，而且它也像 Owl Carousel 或 bxSlider 一样工作，您可以在幻灯片中放入任何东西。

【讨论】：

【解决方案4】：

试试这个code Add Angular Material Carousel Angular 10/11。我们学习如何添加角材料轮播角 11。这个滑块是一个非常易于使用的角应用程序。这次我们使用 angular 11 @ngbmodule/material-carousel。

安装 npm 包

ng add @angular/material npm install @ngmodule/material-carousel

导入 MatCarouselModule

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 10/11 Material UI 的轮播。

【讨论】：