Angular6中使用Swiper的方法示例


Posted in Javascript onJuly 09, 2018

项目使用的Angular版本是V6.0.3

Angular6中使用Swiper的方法示例

安装Swiper

npm install swiper --save

或者

yarn add swiper --save

在angular.json文件添加swiper.js和swiper.css

Angular6中使用Swiper的方法示例

angular.json

安装模组定义档

npm install @types/swiper --save

或者

yarn add @types/swiper --save

配置tsconfig文件

Angular6中使用Swiper的方法示例

tsconfig.json

Angular6中使用Swiper的方法示例

tsconfig.app.json

按照上面的配置完成后,angular里就可以用swiper。下面是一个小demo。

test.component.html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" *ngFor="let data of slides">
      <img [src]="data" alt="" width="100%">
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 如果需要导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

test.component.ts

import {
  AfterViewInit,
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent implements AfterViewInit {
  testSwiper: Swiper;
  slides = [
    'https://via.placeholder.com/300x200/FF5733/ffffff',
    'https://via.placeholder.com/300x200/C70039/ffffff',
    'https://via.placeholder.com/300x200/900C3F/ffffff'
  ];

  constructor() {}

  ngAfterViewInit() {
    this.testSwiper = new Swiper('.swiper-container', {
      direction: 'horizontal',
      loop: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
  }
}

运行结果

Angular6中使用Swiper的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 #Javascript
微信小程序实现漂亮的弹窗效果
May 26 #Javascript
Angular通过指令动态添加组件问题
Jul 09 #Javascript
js实现左右两侧浮动广告
Jul 09 #Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 #Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 #Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 #Javascript
You might like
编译问题
2006/10/09 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
JS闭包原理及其使用场景解析
2020/12/03 Javascript
低版本中Python除法运算小技巧
2015/04/05 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python制作图片缩略图
2019/04/30 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
工程部主管岗位职责
2013/11/17 职场文书
前处理组长岗位职责
2014/03/01 职场文书
文明城市标语
2014/06/16 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
大学生团员个人总结
2015/02/14 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
goland 设置project gopath的操作
2021/05/06 Golang
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫