Angular6中使用Swiper的方法示例
更新時(shí)間：2018年07月09日 14:20:56 作者：小略子
這篇文章主要介紹了Angular6中使用Swiper的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
項(xiàng)目使用的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。下面是一個(gè)小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>
<!-- 如果需要分頁(yè)器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導(dǎo)航按鈕 -->
<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,
// 如果需要分頁(yè)器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動(dòng)條
scrollbar: {
el: '.swiper-scrollbar',
},
});
}
}
運(yùn)行結(jié)果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表
這篇文章主要介紹了angular-ui-sortable實(shí)現(xiàn)可拖拽排序列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
AngularJS使用自定義指令替代ng-repeat的方法
這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能，又具有超高性能的自定義方法，有需要的小伙伴們可以參考借鑒，下面來一起看看吧。2016-09-09
這篇文章主要介紹了angularJS中router的使用方法和示例分享,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了9種改善AngularJS性能的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
解決angularjs中同步執(zhí)行http請(qǐng)求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請(qǐng)求的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Angular2 (RC5) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09
對(duì)angular2中的ngfor和ngif指令嵌套實(shí)例講解
今天小編就為大家分享一篇對(duì)angular2中的ngfor和ngif指令嵌套實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Angular搜索場(chǎng)景中使用rxjs的操作符處理思路
這篇文章主要介紹了Angular搜索場(chǎng)景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下2018-05-05
AngularJS實(shí)現(xiàn)select的ng-options功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)select的ng-options功能,結(jié)合實(shí)例形式分析了AngularJS使用ng-options操作select列表的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07
本文通過幾個(gè)循序漸進(jìn)的例子，給大家詳細(xì)講解了如何快速入門AngularJS，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04