angular2_引入第三方文件之swiper的引入

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;
}