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

安装Swiper

npminstallswiper--save

或者

yarnaddswiper--save

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

angular.json

安装模组定义档

npminstall@types/swiper--save

或者

yarnadd@types/swiper--save

配置tsconfig文件

tsconfig.json

tsconfig.app.json

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

test.component.html

<pclass="swiper-container"><pclass="swiper-wrapper"><pclass="swiper-slide"*ngFor="letdataofslides"><img[src]="data"width="100%"></p></p><!--如果需要分页器--><pclass="swiper-pagination"></p><!--如果需要导航按钮--><pclass="swiper-button-prev"></p><pclass="swiper-button-next"></p></p>

test.component.ts

import{AfterViewInit,Component,OnInit}from'@angular/core';@Component({selector:'app-test',templateUrl:'./test.component.html'})exportclassTestComponentimplementsAfterViewInit{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=newSwiper('.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中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注本站行业资讯频道,感谢各位的阅读!