项目使用的Angular7.0和swiper4
1.安装Swiper:
(自己使用cnpm命令安装竟然在node_modules文件夹下找不到swiper,使用npm命令则可以,这是why?)
npm install swiper --save
在angular.json文件添加swiper.js和swiper.css
"architect": {
...............
"styles": [
"src/styles.css",
"./node_modules/swiper/dist/css/swiper.min.css"
],
"scripts": [
"./node_modules/swiper/dist/js/swiper.min.js"
]
....................
}
3.安装模组定义档:
npm install @types/swiper --save
然后再配置tsconfig文件:
"typeRoots": [
//加上下面这句话
"node_modules/@types"
]
4.配置tsconfig.app.json文件:
"types": [
//加上swiper
"swiper"
]
5.slider.component.ts
import {
// 需导入AfterViewInit
AfterViewInit,
Component,
OnInit
} from '@angular/core';
// 引入swiper
declare var Swiper:any;
@Component({
selector: 'app-test',
templateUrl: './test.component.html
'})
export class TestComponent implements AfterViewInit {
slider;
constructor() {}
// swiper在 ngOnInit声明里初始化可能会报错,所以在ngAfterViewInit声明周期里初始化
ngAfterViewInit() {
this.slider = new Swiper('.swiper-container', {
autoplay: {
delay: 4500,
disableOnInteraction: false,
},
speed: 1000,
direction: 'horizontal',
loop: true,
// 分页器
pagination: {
el: '.swiper-pagination',
}
// 前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
});
}
}
6.按照上面的配置完成后,angular里就可以用swiper。
homecomponent.ts文件:
import { Component, AfterViewInit,OnInit } from '@angular/core';
declare var Swiper:any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements AfterViewInit {
title = 'ng-router';
slider;
constructor() {}
ngOnInit(){}
ngAfterViewInit() {
this.slider = new Swiper('.swiper-container', {
autoplay: {
delay: 4500,
disableOnInteraction: false,
},
speed: 1000,
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
});
}
}
homecomponent.html文件:
<header>首页</header>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
homecomponent.css文件:
header {
width: 100%;
height: 65px;
line-height: 65px;
background: #333;
text-align: center;
}
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 40vh;;
border: 1px solid red;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}