'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:""
}
];

angularjs指令实现轮播图----swiper的更多相关文章

  1. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  2. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  3. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  4. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  5. AngularJS:实现轮播图效果

    实现步骤如下: 要实现这个功能,可以http://angular-ui.github.io/bootstrap/ 中的控件实现.实现步骤如下: 1. 下载ui-bootstrap.js程序http:/ ...

  6. 微信小程序之视图容器(swiper)组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

  7. 微信小程序之 Swiper(轮播图)

    1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...

  8. vue2 使用 swiper 轮播图效果

    第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...

  9. vue2.0 + vux (五)api接口封装 及 首页 轮播图制作

    1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...

随机推荐

  1. java中四种访问修饰符

    Java中的四种访问修饰符:public.protected.default(无修饰符,默认).private. 四种修饰符可修饰的成分(类.方法.成员变量)   public protected d ...

  2. 支付宝内部功能调用APP的said说明

    追加: 支付宝收款码 alipayqr://platformapi/startapp?saId=20000123   微信扫一扫 weixin://scanqrcode (跳转微信扫一扫) 支付宝扫一 ...

  3. 利用event为z数据表定期添加和删除分区

    我们去年就开始把zabbix数据库改成用TokuDB来支撑,并且启用了表分区(详情见:迁移Zabbix数据库到TokuDB).这样做的好处很明显,较早的历史数据可以通过删除分区快速废弃掉.要知道,za ...

  4. Docker Dockerfile 一

    1.概述 创建Docker镜像的方式有三种 docker commit命令:由容器生成镜像: Dockerfile文件+docker build命令: 从本地文件系统导入:OpenVZ的模板. 关于这 ...

  5. AutoCAD的代替软件

    AutoCAD的代替软件Autocad2005以上版本都需要.net framework的支持,安装起来太麻烦,而且卡顿.以下几个软件可以代替Autocad,操作和插件基本都能兼容Autocad.1. ...

  6. C++进阶--静态多态

    //############################################################################ /* * 多态 */ // 常见的动态多态 ...

  7. 统计apk或jar中方法数量

    一.apk中方法数量 ./android-sdk-linux/build-tools/23.0.2/dexdump -f  apk路径 | grep method_ids_size 二.jar中方法数 ...

  8. pandas.DataFrame 插入列和行

    转载:www.360doc.com/content/17/0225/23/1489589_632032302.shtml 以csv实例文件操作插入DataFrame的行和列 文件名:example.c ...

  9. 开启Unity3D之旅

    圣典知识目录http://game.ceeger.com/Manual/ NGUI http://www.taikr.com/course/34泰课课程 http://tieba.baidu.com/ ...

  10. Flashbuilder的bug FlashBuilder 1119: 访问可能未定义的属性 on (通过 static 类型

    FlashBuilder 1119: 访问可能未定义的属性 on (通过 static 类型 当此问题出现的时候 无论 刷新 清理 注释 删除 乃至重启电脑都无济于事. 解决方法:备份此类到另外一个地 ...