angular2 使用swiper

10次阅读

共计 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;
}

正文完
 0