angularjs中使用輪播圖指令swiper

我們在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}}" alt="" /></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>