angular2 使用swiper

第一步:

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

丰富自己,胜过取悦别人。

10.6k 声望
7.7k 粉丝
0 条评论
推荐阅读
Vue修改代理无需重启项目解决方式
在使用 vue-cli3 创建项目时,如果在 vue.config.js 中配置了代理,那么在开发环境下,每次修改代理配置后都需要重启项目才能生效,这样就会造成开发效率的降低,因此需要解决这个问题。

JenK2阅读 185

封面图
JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.4k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

丰富自己,胜过取悦别人。

10.6k 声望
7.7k 粉丝
宣传栏