angularjs指令实现轮播图----swiper

'use strict';
    angular.module('app').directive('swipersLbt',swipers);
        swipers.$inject = ['$timeout'];
        function swipers($timeout) {
            return {
                restrict: "EA",
                scope: {
                    data:"="
                },
                template: '<div class="swiper-container silder">'+
                                '<div class="swiper-wrapper">'+
                                '<div class="swiper-slide" ng-repeat="item in data">'+
                                '<a class="" href="{{item.openurl}}"><img ng-src="{{item.imgurl}}" alt="{{item.alt}}" /><span ng-show="item.recom">{{item.recom}}</span></a>'+
                                '</div>'+
                                '</div>'+
                                '<div class="swiper-pagination"></div>'+
                                '</div>',
                link: function(scope, element, attrs) {
                          $timeout(function(){
                                 var swiper = new Swiper('.swiper-container', {   
                                         loop: true,             
                                        autoplay: {
                                          delay: 2500,
                                          disableOnInteraction: false,
                                        },
                                        pagination: {
                                            el: '.swiper-pagination',
                                               clickable: true
                                           }
                                });  
                         },100); 
                }
            };
        }

调用:<swipers-lbt data="lbts"></swipers-lbt>

lbts:

$scope.lbts=[
         {
             imgurl:'image/banner_0.jpg',
             alt:'第1张alt',
             openurl:"https://www.baidu.com",
             recom:"推 荐"
         },{
             imgurl:'image/banner_1.jpg',
             alt:'第2张alt',
             openurl:"https://www.baidu.com",
             recom:""
         }
     ];
原文地址:https://www.cnblogs.com/chenlw/p/9480981.html