angular2_引入第三方文件之swiper的引入
1.安装swiper工具包
npm install swiper --save
2.swiper 引用包
npm install @types/swiper --save
3.在相应引用的j组件xx.component.spec.ts中引入swiper
import { Component, OnInit } from '@angular/core';
import * as swiper from "swiper"; //加载外来包
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
this.onloaded();
console.log(swiper);
}
onloaded(){
var swipers = new swiper('.swiper-container');//new swiper中的swiper必须和上面引用swiper一致
}
}
4.在对应的xx.component.html文件里添加swiper组件,其中swiper.min.css需要放在项目的src的assets文件下
<link rel="stylesheet" href="../../assets/swiper.min.css">
<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>
</div>
5.在对应的xx.component.css添加相应的css
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
.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;
}