欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular6中使用Swiper的方法示例

 更新時間：2018年07月09日 14:20:56   作者：小略子  
這篇文章主要介紹了Angular6中使用Swiper的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

項目使用的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" alt="" 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',
      },
    });
  }
}

運行結果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • angular-ui-sortable實現(xiàn)可拖拽排序列表

    angular-ui-sortable實現(xiàn)可拖拽排序列表

    這篇文章主要介紹了angular-ui-sortable實現(xiàn)可拖拽排序列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • AngularJS使用自定義指令替代ng-repeat的方法

    AngularJS使用自定義指令替代ng-repeat的方法

    這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能，又具有超高性能的自定義方法，有需要的小伙伴們可以參考借鑒，下面來一起看看吧。
    2016-09-09
  • angularJS中router的使用指南

    angularJS中router的使用指南

    這篇文章主要介紹了angularJS中router的使用方法和示例分享,需要的朋友可以參考下
    2015-02-02
  • 9種改善AngularJS性能的方法

    9種改善AngularJS性能的方法

    這篇文章主要為大家詳細介紹了9種改善AngularJS性能的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-11-11
  • 解決angularjs中同步執(zhí)行http請求的方法

    解決angularjs中同步執(zhí)行http請求的方法

    今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請求的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Angular2 (RC5) 路由與導航詳解

    Angular2 (RC5) 路由與導航詳解

    這篇文章主要介紹了Angular2 (RC5) 路由與導航的相關資料,需要的朋友可以參考下
    2016-09-09
  • 對angular2中的ngfor和ngif指令嵌套實例講解

    對angular2中的ngfor和ngif指令嵌套實例講解

    今天小編就為大家分享一篇對angular2中的ngfor和ngif指令嵌套實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Angular搜索場景中使用rxjs的操作符處理思路

    Angular搜索場景中使用rxjs的操作符處理思路

    這篇文章主要介紹了Angular搜索場景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件，這樣就可以使用rxjs的各種操作符，可以快捷很多。需要的朋友可以參考下
    2018-05-05
  • AngularJS實現(xiàn)select的ng-options功能示例

    AngularJS實現(xiàn)select的ng-options功能示例

    這篇文章主要介紹了AngularJS實現(xiàn)select的ng-options功能,結合實例形式分析了AngularJS使用ng-options操作select列表的相關實現(xiàn)技巧,需要的朋友可以參考下
    2017-07-07
  • AngularJS快速入門

    AngularJS快速入門

    本文通過幾個循序漸進的例子，給大家詳細講解了如何快速入門AngularJS，十分的實用，這里推薦給大家，有需要的小伙伴可以參考下。
    2015-04-04

最新評論