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>
<!-- 如果需要分頁器 -->
<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,
// 如果需要分頁器
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中如何綁定iframe中src的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
使用angular-cli webpack創(chuàng)建多個(gè)包的方法
這篇文章主要介紹了使用angular-cli webpack創(chuàng)建多個(gè)包的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
本篇文章主要介紹了Angular 如何使用第三方庫的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
發(fā)布Angular應(yīng)用至生產(chǎn)環(huán)境的方法
這篇文章主要介紹了發(fā)布Angular應(yīng)用至生產(chǎn)環(huán)境的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
AngularJs用戶輸入動(dòng)態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動(dòng)態(tài)模板XSS攻擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
angular6?Error:Debug?Failure?at?typeToString解決分析
這篇文章主要為大家介紹了angular6?Error:Debug?Failure?at?typeToString解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家詳細(xì)介紹了AngularJS表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Angular中封裝fancyBox(圖片預(yù)覽)遇到問題小結(jié)
這篇文章主要介紹了Angular中封裝fancyBox(圖片預(yù)覽)遇到的問題小結(jié),需要的朋友可以參考下2017-09-09
下面小編就為大家?guī)硪黄猘ngular.js之路由的選擇方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例
下面小編就為大家分享一篇Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12