angularjs中使用輪播圖指令swiper

標籤：min   click   content   安裝   引入   turn   nts   cli   att   

我們在angualrjs移動開發中遇到輪播圖的功能

安裝 swiper  npm install --save swiper   或者 bower install --save swiper

引入檔案路徑

<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" /><script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script>

 

指令中的編寫方式

(function() {    ‘use strict‘;    angular        .module(‘campus.core‘)  //對應項目的module 請換成自己的模組名稱        .directive(‘swipers‘,swipers);
        swipers.$inject = [‘$timeout‘];        function swipers($timeout) {            return {                restrict: "EA",                scope: {                    data:"="                },                template: ‘<div class="swiper-container silder">‘+                                ‘<ul class="swiper-wrapper">‘+                                ‘<li class="swiper-slide" ng-repeat="item in data">‘+                                ‘<a class="img40" href="{{item.contentUrl}}"><img ng-src="{{item.imgId}}"  /></a>‘+                                ‘</li>‘+                                ‘</ul>‘+                                ‘<div class="swiper-pagination"></div>‘+                                ‘</div>‘,                link: function(scope, element, attrs) {                          $timeout(function(){                                 var swiper = new Swiper(‘.swiper-container‘, {   //輪播圖綁定樣式名                                      pagination: ‘.swiper-pagination‘,                                            paginationClickable: true,                                                      autoplay: 2500,                                });                           },100);                 }            };        }  })();

data 綁定介面返回的輪播列表 vm.home.headImgs對應輪播圖返回的資料列表

 <!--輪播圖--> <swipers data="vm.home.headImgs" ></swipers>

angularjs中使用輪播圖指令swiper