angular 用swiper插件 100%能行

效果：

 

angular :13.1.0

swiper:8.4.7

看方法直接到最后

下面是一些坑：

搜angular swiper 结果是Swiper Angular Components (swiperjs.com)

照着引入，发现啥效果都没有 

网上的方法是在angular.json 的style[]里添加

有了部分样式 1.5张的预览，但是分页没有了。 

最后去油管学习了

https://www.youtube.com/watch?v=OoT3CKVEYXo

0.安装swiper

npm install swiper@8.4.7  

1.app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { SwiperModule } from 'swiper/angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SwiperModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.app.component.html

<swiper
  [slidesPerView]="1"
  [spaceBetween]="50"
  [navigation]="true"
  [pagination]="{ clickable: true }"
  [autoplay]="{
   delay:1000
  }"
>
  <ng-template swiperSlide>
    <div class="slide-item">Slide 1</div>
  </ng-template>
  <ng-template swiperSlide> <div class="slide-item">Slide 2</div> </ng-template>
  <ng-template swiperSlide> <div class="slide-item">Slide 3</div></ng-template>
</swiper>

3.app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y,Autoplay } from 'swiper';

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y,Autoplay]);
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation:ViewEncapsulation.None
})
export class AppComponent {
  title = 'swiper-demo';
}

4.app.component.scss

@import '~swiper/scss';
@import '~swiper/scss/navigation';
@import '~swiper/scss/pagination';
.slide-item {
    width: 100%;
    height: 200px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }