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 相关文章推荐
jQuery中live方法的重复绑定说明
Oct 21 Javascript
js快速排序的实现代码
Dec 08 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Python中max函数用法实例分析
2015/07/17 Python
Python编码爬坑指南(必看)
2016/06/10 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python登录系统界面实现详解
2019/06/25 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
基于Python的OCR实现示例
2020/04/03 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
出纳岗位职责范本
2013/12/01 职场文书
建筑项目策划书
2014/01/13 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2014年居委会工作总结
2014/12/09 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
python基础之while循环语句的使用
2021/04/20 Python