Swiper的学习笔记

最近在尝试做一个移动端的webapp，正好在学习NG2，就使用NG2来做了。在做轮播图的时候，就尝试着使用swiper来做，话不多说，直接开始吧。

第一步首先先引入swiper

在index.html里面使用cdn进行引入swiper所需要的js和css，或者将这两个文件下载下来放入assets/css或者 assets/js文件夹内进行引入。
如果你不想将Swiper文件放在你的项目中，你可以使用Swiper的CDN服务。
以下是各版本的Swiper CDN地址，要将4.x.x改成相应的版本，如4.0.2(或3.x.x版本)。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>

以上的图片我用的是本地的，要测试的话，可以换一下

第二步声明Swiper对象

在typings.d.ts文件内进行声明全局的Swiper对象。

typings.d.ts

/* SystemJS module definition */declare var module: NodeModule;interface NodeModule {  id: string;}declare var Swiper: any;  

第三步使用swiper

现在的swiper已经在项目中配置好了，可以开始使用了，在html中进行使用

roll-picture.component.html

<div class="swiper-container">  <div class="swiper-wrapper">    <div class="swiper-slide">      <img src="./assets/img/1.png" />    </div>    <div class="swiper-slide">      <img src="./assets/img/2.jpg" />    </div>    <div class="swiper-slide">      <img src="./assets/img/3.jpg" />    </div>  </div>  <!-- 如果需要分页器 -->  <divclass="swiper-pagination"></div></div>

第四步在ts里初始化自己的Swiper对象

roll-picture.component.ts

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-roll-picture',  templateUrl: './roll-picture.component.html',  styleUrls: ['./roll-picture.component.less']})export class RollPictureComponent implements OnInit {  constructor() { }  ngOnInit(): void {    var swiper = new Swiper('.swiper-container', {      pagination: {        el: '.swiper-pagination',      },//添加分页器（就是轮播图中的小点点）      direction: 'horizontal',//轮播的方向      paginationClickable: true,      longSwipesRatio: 0.3,      loop: true,      autoplay: {        disableOnInteraction: false,      },//是否自己会开始轮播（disableOnInteraction是如果手动滑动是否会停止自动轮播）      speed: 2000,      touchRatio: 1,      observer: true,//修改swiper自己或子元素时，自动初始化swiper        observeParents: true,//修改swiper的父元素时，自动初始化swiper      });    swiper.pagination.bullets.css('background', 'rgb(255, 255, 255)');  //如果要修改分页器的样式可以这样进行修改  }}

第五步给轮播图添加样式

由于我是做的移动端上的webapp，所以使用的是rem。当然，这个第五步也是可以忽略的…

roll-picture.component.less

.swiper-container {  height: 5.5rem;}  .swiper-slide{  height: 5.5rem;}.swiper-slide img{  width: 100%;  height: 100%;}

---

这个是使用的ng2，和swiper4.0.2的版本写法swiper之前版本在ts中的书写会稍有不同，可以去官网上看看api，很快就会上手的。