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