第一步:
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
<div class="swiper-container swiper-no-swiping">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:red" (click)="goto(1)">Slide 1</div>
<div class="swiper-slide" style="background:blue">Slide 2</div>
</div>
</div>
<button (click)="goto(1)" >1111111</button>
<button (click)="goto(0)" >222222</button>
css
.swiper-container {
width: 600px;
height: 300px;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。