angular2 使用swiper
2024-08-31 07:06:03
欢迎加入前端交流群交流知识&&获取视频资料: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;
}
最新文章
- 易学PHP——WAMP环境搭建
- 解决ScrollView嵌到listView冲突问题
- 利用a标签特性解析地址(附加属性说明)
- jquery控制元素的淡入淡出切换
- 【转】Dancing Links题集
- sae-xhprof调试性能
- memcached添加IP白名单,只允许指定服务器调用
- shell命令前后端切换和暂停
- js For循环练习。
- [AHOI 2005]COMMON 约数研究
- eCharts使用图表简单示例
- Security3: 架构和权限
- 001 Ajax中XMLHttpRequest的讲解
- 纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示
- MathExam6317
- js &; listen mouse click
- HDU 1811 拓扑排序 并查集
- create-react-app部署到GitHub Pages时报错:Failed to get remote。origin.url
- AC日记——[SDOI2010]大陆争霸 洛谷 P3690
- 洛谷P2566 [SCOI2009]围豆豆(状压dp+计算几何)