共计 698 个字符,预计需要花费 2 分钟才能阅读完成。
第一步:
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;
}