如何在angular 8中使用angular材质创建旋转木马？

第一张图片是我目前得到的，第二张是我真正想要的

第一名：-

第二：-

{{data.bank_name}
{{data.account_number}
总余额

{{data.amount}

您可以使用

 <div class="owl-carousel owl-theme">
       <div class="item" *ngFor="let data of resource let i = index;">
 <mat-grid-list cols="2" rowHeight="30px" class="carousel-data"  (click)="showdata()" >

        <mat-grid-tile>     
           <img class="m-t-0 m-b-0 "[src]="data.img" alt="" width="24">
            <div class="prof-left" style="margin-left: 10px;">
                <p class="m-t-0 m-b-0 bank-name">{{ data.bank_name}}</p>
                <p class="m-t-0 m-b-0 bank-account">{{ data.account_number }}</p>
            </div>
        </mat-grid-tile>
        <mat-grid-tile>
            <div class="prof-right">
                <p class="m-t-0 m-b-0 total-bal">Total Bal</p>
                <p class="m-t-0 m-b-0 total-amount">{{ data.amount }}</p>
            </div>
        </mat-grid-tile>
    </mat-grid-list>
    </div>
    </div>

注意，您必须包含jquery和owl旋转木马文件才能使其正常工作

---

或者您可以使用

，如果您已经包含了，您可以尝试类似引导转盘的方法

或者像wich这样的依赖关系非常简单，在这个链接中提到了一些步骤

---

运行纱线添加ngx-owl-carousel-o或npm安装ngx-owl-carousel-o或ng添加ngx-owl-carousel-o.

添加样式（这些变体之一）。

src/styles.sass

或

src/styles.scss

：

@import '~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import '~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

导入路由模块

并路由到

AppModule

，除非已导入

将浏览器动画模块导入
AppModule
，除非已导入

将CarouselModule
导入到一个模块中，该模块声明了一个要使用carousel的组件

import { CarouselModule } from 'ngx-owl-carousel-o';
@NgModule({
  imports: [ CarouselModule ],
  declarations: [ CarouselHolderComponent ]
})
export class SomeModule { }

添加到所需的组件customOptions或使用旋转木马选项以不同方式命名对象：

import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
  selector: '....',
  templateUrl: 'carousel-holder.component.html'
})
export class CarouselHolderComponent {
  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}
Add html-markup to the template of the component (in this case, add it to carousel-holder.component.html):

  <div>Some tags before</div>
    <owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide>Slide 1</ng-template>  
    <ng-template carouselSlide>Slide 2</ng-template>  
    <ng-template carouselSlide>Slide 3</ng-template>  
  </owl-carousel-o>
  <div>Some tags after</div>

从“ngx-owl-carousel-o”导入{OwlOptions}；
@组成部分({
选择器：“…”，
templateUrl:'carousel holder.component.html'
})
导出类转盘HolderComponent{
自定义选项：选项={
循环：对，
mouseDrag:错，
触摸拖动：错误，
pullDrag:false，
点：错，
航速：700，
导航文本：[''，''，
响应：{
0: {
项目：1
},
400: {
项目：2
},
740: {
项目：3
},
940: {
项目：4
}
},
导航：对
}
}
将html标记添加到组件的模板（在本例中，将其添加到carousel holder.component.html）：
之前有一些标签
幻灯片1
幻灯片2
幻灯片3
后面有一些标签

或

前面的一些标记
后面有一些标签


1.
ng新猫头鹰转盘


2.
npm安装ngx-owl-carousel-owl.carousel jquery——保存


3.
在angular.json中添加库文件

            "styles": [
            "src/styles.css",
            "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
            "./node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
            ],
            "scripts": ["./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/owl.carousel/dist/owl.carousel.min.js"]
            },
            <br><br>

           **4.** `Update app.module.ts file`<br>
                import { OwlModule } from 'ngx-owl-carousel';
                // Add OwlModule to imports at below section
                imports: [BrowserModule, OwlModule],
                <br><br>

“样式”：[
“src/styles.css”，
“/node_modules/owl.carousel/dist/assets/owl.carousel.min.css”，
“/node_modules/owl.carousel/dist/assets/owl.theme.default.min.css”
],
“脚本”：[“/node\u modules/jquery/dist/jquery.min.js”，
“/node_modules/owl.carousel/dist/owl.carousel.min.js”]
},



**4.*`更新app.module.ts文件`

从“ngx owl转盘”导入{OwlModule}；
//将OwlModule添加到下面部分的导入中
导入：[BrowserModule，OwlModule]，




5.
更新app.component.ts文件


mySlideImages=['../assets/images/image1.jpg'、'../assets/images/image2.jpeg'、'../assets/images/image3.jpg']

mySlideOptions={items:1，dots:true，nav:true}；



6.
更新app.component.html文件




有关详细信息，请点击此链接
谢谢您的帮助，但此解决方案不适用于我不知道why@Rahul“解决方案不起作用”？请针对具体问题或更好，您可以为您的问题添加stackblitz演示Hey@jitender我已从stackblitz下载了代码，但其显示结果如下结果：---您好！1 2 3 4它没有像在这个链接中显示的那样旋转，我猜它没有使用CSS文件或动画，但没有得到它是什么
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
  selector: '....',
  templateUrl: 'carousel-holder.component.html'
})
export class CarouselHolderComponent {
  customOptions: OwlOptions = {
    loop: true,
    mouseDrag: false,
    touchDrag: false,
    pullDrag: false,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}
Add html-markup to the template of the component (in this case, add it to carousel-holder.component.html):

  <div>Some tags before</div>
    <owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide>Slide 1</ng-template>  
    <ng-template carouselSlide>Slide 2</ng-template>  
    <ng-template carouselSlide>Slide 3</ng-template>  
  </owl-carousel-o>
  <div>Some tags after</div>

<div>Some tags before</div>
    <owl-carousel-o [options]="customOptions">

    <ng-container *ngFor="let slide of slidesStore">
      <ng-template carouselSlide [id]="slide.id">
        <img [src]="slide.src" [alt]="slide.alt" [title]="slide.title">
      </ng-template>
    </ng-container>

  </owl-carousel-o>
  <div>Some tags after</div>

            **Steps Needs to follow to achieve Carousel:-**

            "styles": [
            "src/styles.css",
            "./node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
            "./node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
            ],
            "scripts": ["./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/owl.carousel/dist/owl.carousel.min.js"]
            },
            <br><br>

           **4.** `Update app.module.ts file`<br>
                import { OwlModule } from 'ngx-owl-carousel';
                // Add OwlModule to imports at below section
                imports: [BrowserModule, OwlModule],
                <br><br>