效果:
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;
}