angular2 使用swiper

testbird 发布于2019-08-23 14:09 / 305人阅读

摘要：第一步第二步下载支持声明文件文件里循环模式选项切换到第一个，速度为秒

第一步：

npm install swiper --save

第二步：下载swiper ts支持(ts声明文件：http://microsoft.github.io/Ty...)

npm install  @types/swiper --save

ts文件里：

import swiper from "Swiper";

swiperSlide:any
  swiperw() {
    let ss = new swiper(".swiper-container", {
      loop: true, // 循环模式选项
      effect : "flip",
     //  effect: "cube"
    })
    this.swiperSlide = ss
  }
  goto(e) {
    this.swiperSlide.slideToLoop(e, 1000, false);//切换到第一个slide，速度为1秒
  }

html


  
      Slide 1
      Slide 2

css

.swiper-container {
    width: 600px;
    height: 300px;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100182.html

2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

chengjianhua 2019-08-29 12:35 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

Anonymous1 2019-08-20 16:31 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

dreamtecher 2019-08-01 16:51 评论0 收藏0
毕业后的第一次总结。

摘要：途中学了很火的，觉得目前的前后端不分离的老模式以及自己一个人摸爬滚打影响个人发展，就约好同学，年后离职，上海见。一年前用的地区人才网，这次用的直聘。后来收到了天内收到了家面试通知，上午的在八佰伴，下午的在浦电路。年初的迷茫已经找不到词语来形容时间过得有多快了。两年前的这个时候，我还在南宁，一个二线&&三线的城市找工作，投简历，等面试，等通知，等offer，然后入职。我清晰记得，2...

gxyz 2019-08-30 15:55 评论0 收藏0