首页 > 代码库 > angularjs中使用轮播图指令swiper

angularjs中使用轮播图指令swiper

2024-09-27 20:01:39   212人阅读

我们在angualrjs移动开发中遇到轮播图的功能

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

引入文件路径

<link rel="stylesheet" href=http://www.mamicode.com/"../bower_components/swiper/dist/css/swiper.min.css" />
<script src=http://www.mamicode.com/"../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="http://www.mamicode.com/{{item.contentUrl}}"><img ng-src="http://www.mamicode.com/{{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=http://www.mamicode.com/"vm.home.headImgs" ></swipers>

angularjs中使用轮播图指令swiper


联系
我们