angular2-swiper幻灯片模块使用方法

1、安装模块

npm install swiper angular2-swiper --save-dev

2、配置angular-cli.json，样式文件

"styles": ["../node_modules/swiper/dist/css/swiper.css"
],

3、配置app.module.ts

import {KSSwiperModule} from "angular2-swiper";
...
imports: [KSSwiperModule],
...

4、模板文件

<div class="myslides"><ks-swiper-container [options]="swipeOptions"><ks-swiper-slide *ngFor="let item of data"><img src="http://api.randomuser.me/portraits/thumb/men/{{item}}.jpg"></ks-swiper-slide></ks-swiper-container><button (click)="movePrev()">Prev</button><button (click)="moveNext()">Next</button>
</div>

5、组件

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {KSSwiperContainer, KSSwiperSlide} from 'angular2-swiper';
@Component({selector: "pri-home",templateUrl: "../templates/home.component.html"
})
export class HomeComponent {// 单机上一个下一个的时候调用封装子组件中的方法@ViewChild(KSSwiperContainer)swiperContainer:KSSwiperContainer;// 图片数组data:Array<number>;// 配置swipeOptions:any;constructor() {this.swipeOptions = {// 每页显示几张图片slidesPerView: 4,// 是否循环loop: false,spaceBetween: 5};this.data = [1, 2, 3, 4, 5, 6]}// 下一个moveNext() {this.swiperContainer.swiper.slideNext();}// 上一个movePrev() {this.swiperContainer.swiper.slidePrev();}}

angular2-swiper幻灯片模块使用方法相关推荐

在ppt中加入python_python实现向ppt文件里插入新幻灯片页面的方法
python实现向ppt文件里插入新幻灯片页面的方法本文实例讲述了python实现向ppt文件里插入新幻灯片页面的方法.分享给大家供大家参考.具体实现方法如下: # -*- coding: UTF- ...
Python中os和shutil模块实用方法集锦
Python中os和shutil模块实用方法集锦类型:转载时间:2014-05-13 这篇文章主要介绍了Python中os和shutil模块实用方法集锦,需要的朋友可以参考下复制代码代码如下: ...
maven上解决循环依赖、又不想新加第三模块的方法
maven上解决循环依赖.又不想新加第三模块的方法参考文章: (1)maven上解决循环依赖.又不想新加第三模块的方法 (2)https://www.cnblogs.com/yuan951/p/89 ...
python3.7怎么安装dlib_python3.7添加dlib模块的方法
1.下载dlib安装包安装dlib真是费劲,dlib下载地址:http://dlib.net/files/ 我下载的是dlib-19.14.zip,然后解压安装dlib 在安装dlib前需要安装Bo ...
python卸载模块的方法汇总_Python卸载模块的方法汇总
本文给大家汇总介绍了3种卸载Python已安装模块的方法,推荐大家使用easy_install或者pip的方式来进行,简单方便 easy_install 卸载通过easy_install 安装的模块 ...
python导入模块的变量_python 环境变量和import模块导入方法(详解)
1.定义模块:本质就是.py结尾的文件(逻辑上组织python代码)模块的本质就是实现一个功能文件名就是模块名称包: 一个有__init__.py的文件夹:用来存放模块文件 2.导入模块 for ...
关于金蝶k3 wise供应生门户登陆界面屏蔽业务账套多余功能模块设置方法
关于金蝶k3 wise供应生门户登陆界面屏蔽业务账套多余功能模块设置方法 1. 找到以下路径 ...\Kingdee\K3ERP\KDHR\SITEFILE\WEBUI\ 找到"Login. ...
合法的python变量名import_python 环境变量和import模块导入方法(详解)
1.定义模块:本质就是.py结尾的文件(逻辑上组织python代码)模块的本质就是实现一个功能文件名就是模块名称包: 一个有__init__.py的文件夹:用来存放模块文件 2.导入模块 imp ...
python没有pil模块_Python离线安装PIL 模块的方法
Python离线安装PIL 模块的方法发布时间:2020-09-02 00:14:51 来源:脚本之家阅读:122 作者:那. python的库一般都用pip安装. 但是有时候也会出现在线安装失败 ...

angular2-swiper幻灯片模块使用方法

angular2-swiper幻灯片模块使用方法相关推荐

最新文章

热门文章