Swiper怎么在Angular6中使用

Swiper怎么在Angular6中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联公司长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为治多企业提供专业的网站设计、成都网站制作，治多网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

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

安装Swiper

npm install swiper --save

或者

yarn add swiper --save

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

Swiper怎么在Angular6中使用

angular.json

安装模组定义档

npm install @types/swiper --save

或者

yarn add @types/swiper --save

配置tsconfig文件

Swiper怎么在Angular6中使用

tsconfig.json

Swiper怎么在Angular6中使用

tsconfig.app.json

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

test.component.html

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', }, }); } }

Swiper怎么在Angular6中使用

其他资讯