欢迎加入前端交流群交流知识&&获取视频资料: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;
}

angular2 使用swiper的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  4. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  5. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  6. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  7. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

  8. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  9. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

随机推荐

  1. 1.0 windows10系统安装步骤(1)

    1.0 windows10系统安装步骤(1) 根据自己对笔记本系统的折腾,为了方便他人系统的安装,故总结笔记本系统的安装步骤 目录: 1.0 [windows10系统安装步骤(1)] 2.0 Linu ...

  2. 设计模式之合成模式(Java语言描述)

    <JAVA与模式>一书中开头是这样描述合成(Composite)模式的: 合成模式属于对象的结构模式,有时又叫做"部分--整体"模式.合成模式将对象组织到树结构中,可以 ...

  3. PHP CURL的几种用法

    1.抓取无访问控制文件 <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "http://localhost/mytest/ ...

  4. Assembly之instruction之CMP

    CMP[.W]  Compare source and destinationCMP.B  Compare source and destination Syntax  CMP src,dst or ...

  5. 2星|《10W+走心文案是怎样炼成的》:标题党。实际是台湾创意总监的一些人生感悟和两三个很一般的创意文案

    10W+走心文案是怎样炼成的 作者是台湾人,曾在台湾奥美担任创意总监,做过一些广告.本书是他的一些经验介绍. 总体来说是标题党,作者的广告基本是电视广告,跟文案也有关系,估计播放量也很容易过10W+, ...

  6. 06--谈谈:C++类的“包含”机制

    谈谈:C++类的“包含”机制   本人在学习Qt的时候发现了一个非常有趣的现象.有很多函数的调用方法都写成了如下的形式: object.func().func2(); 这令小弟着实不懂.在上面这段代码 ...

  7. golang入门-defer

    package main import "fmt" func main() { i := 5 tmap := make(map[string]int, 5) tmap[" ...

  8. 减小数据库Log文件大小 1MB 为自定义大小

    --减小数据库Log文件大小 1MB 为自定义大小USE [master]GOALTER DATABASE DataBaeName SET RECOVERY SIMPLE WITH NO_WAITGO ...

  9. ES6中的Symbol

    ---恢复内容开始--- Symbol 1.1 概述 保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突.这就是 ES6 引入Symbol的原因 在es6之前,JavaScript ...

  10. Vue.js大总结

    最近回顾了一下Vue.js的基础知识,把认为重要的几个点简单的罗列了出来 vue渐进式的理解 vue可以开发很多插件,可以把很多插件组合到一起,渐进的增加vue的功能 update beforeUpd ...