欢迎加入前端交流群交流知识&&获取视频资料:749539640

第一步:

npm install swiper --save

第二步:下载swiper ts支持(http://microsoft.github.io/TypeSearch/

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, , false);//切换到第一个slide,速度为1秒
}

html

<div class="swiper-container swiper-no-swiping">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:red" (click)="goto(1)">Slide </div>
<div class="swiper-slide" style="background:blue">Slide </div>
</div>
</div>
<button (click)="goto(1)" ></button>
<button (click)="goto(0)" ></button>

css

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

最新文章

  1. 易学PHP——WAMP环境搭建
  2. 解决ScrollView嵌到listView冲突问题
  3. 利用a标签特性解析地址(附加属性说明)
  4. jquery控制元素的淡入淡出切换
  5. 【转】Dancing Links题集
  6. sae-xhprof调试性能
  7. memcached添加IP白名单,只允许指定服务器调用
  8. shell命令前后端切换和暂停
  9. js For循环练习。
  10. [AHOI 2005]COMMON 约数研究
  11. eCharts使用图表简单示例
  12. Security3: 架构和权限
  13. 001 Ajax中XMLHttpRequest的讲解
  14. 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示
  15. MathExam6317
  16. js &amp; listen mouse click
  17. HDU 1811 拓扑排序 并查集
  18. create-react-app部署到GitHub Pages时报错:Failed to get remote。origin.url
  19. AC日记——[SDOI2010]大陆争霸 洛谷 P3690
  20. 洛谷P2566 [SCOI2009]围豆豆(状压dp+计算几何)

热门文章

  1. Assembly之example
  2. mqtt-client回调方法简介
  3. Data mapping-数据映射
  4. NSURLProtectionSpace 证书认证的上下文
  5. excel 处理方法
  6. react常用语法
  7. PAT_A1149#Dangerous Goods Packaging
  8. mysql 怎样先排序再分组
  9. redis在windows上通过cmd连接服务器(需要密码)
  10. centos 7.2 安装php56-xml