Swiper怎么在Angular6中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
项目使用的Angular版本是V6.0.3
安装Swiper
计算
安全
数据库
网络和加速
企业服务
npm install swiper --save或者
yarn add swiper --save在angular.json文件添加swiper.js和swiper.css
angular.json
安装模组定义档
npm install @types/swiper --save或者
yarn add @types/swiper --save配置tsconfig文件
tsconfig.json
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" 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',
},
});
}
}看完上述内容，你们掌握Swiper怎么在Angular6中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
