资讯专栏INFORMATION COLUMN

angular2 使用swiper

testbird / 489人阅读

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

第一步:

</>复制代码

  1. npm install swiper --save

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

</>复制代码

  1. npm install @types/swiper --save

ts文件里:

</>复制代码

  1. import swiper from "Swiper";
  2. swiperSlide:any
  3. swiperw() {
  4. let ss = new swiper(".swiper-container", {
  5. loop: true, // 循环模式选项
  6. effect : "flip",
  7. // effect: "cube"
  8. })
  9. this.swiperSlide = ss
  10. }
  11. goto(e) {
  12. this.swiperSlide.slideToLoop(e, 1000, false);//切换到第一个slide,速度为1秒
  13. }

html

</>复制代码

  1. Slide 1
  2. Slide 2

css

</>复制代码

  1. .swiper-container {
  2. width: 600px;
  3. height: 300px;
  4. }

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

转载请注明本文地址: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 评论0 收藏0
  • 2017年2月份前端资源分享

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

    chengjianhua 评论0 收藏0
  • 2017年2月份前端资源分享

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

    Anonymous1 评论0 收藏0
  • 2017年2月份前端资源分享

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

    dreamtecher 评论0 收藏0
  • 毕业后的第一次总结。

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

    gxyz 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<