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

Posted 2023-02-19

【中文标题】用于角材料的多项目响应轮播

【英文标题】：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 的东西。

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

我想实现如下输出：

谢谢！

【问题讨论】：

这个你实现了吗？

【参考方案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 的轮播。