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 按位左移运算符使用介绍(
Feb 04 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
vue如何使用rem适配
Feb 06 Vue.js
微信小程序实现自定义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
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
PDO::getAttribute讲解
2019/01/28 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
浅谈Jquery核心函数
2015/06/18 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python语言描述随机梯度下降法
2018/01/04 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
企业理念标语
2014/06/09 职场文书
学生检讨书怎么写
2014/10/09 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python