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:""
}
];
angularjs指令实现轮播图----swiper的更多相关文章
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- angularjs中使用轮播图指令swiper
我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper npm install --save swiper 或者 bower install --save swiper 引入文件 ...
- React Native 之轮播图swiper组件
注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...
- AngularJS:实现轮播图效果
实现步骤如下: 要实现这个功能,可以http://angular-ui.github.io/bootstrap/ 中的控件实现.实现步骤如下: 1. 下载ui-bootstrap.js程序http:/ ...
- 微信小程序之视图容器(swiper)组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
- 微信小程序之 Swiper(轮播图)
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://im ...
- vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
- vue2.0 + vux (五)api接口封装 及 首页 轮播图制作
1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...
随机推荐
- thinkphp5 查询的数据是对象时,获取原始数据方法
获取原始数据 如果你定义了获取器的情况下,希望获取数据表中的原始数据,可以使用: $user = User::get(1); // 通过获取器获取字段 echo $user->status; / ...
- LOJ 2587 「APIO2018」铁人两项——圆方树
题目:https://loj.ac/problem/2587 先写了 47 分暴力. 对于 n<=50 的部分, n3 枚举三个点,把图的圆方树建出来,合法条件是 c 是 s -> f 路 ...
- bzoj 4184 shallot——线段树分治+线性基
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4184 本来想了可持久化trie,不过空间是 nlogn (出一个节点的时候把 tot 复原就 ...
- itertools.groupby()/itertools.compress() 笔记
关于itertools.groupby() itertools.groupby()就是将相邻的并且相同的键值划分为同一组,相似功能可以看https://docs.python.org/3/librar ...
- [转]Python中yield的解释
转自: http://python.jobbole.com/83610/ 本文作者: 伯乐在线 - wklken .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 翻译 来源于stackover ...
- 微信支付app的各种坑
android: 签名要一致,要导出singed包 要记得重启手机 如果别人的都可以支付,我的不可以,就要退出微信账号,重新登陆微信账号一下(不仅仅是退出微信应用). 上面还不行的话,就要重新换个微信 ...
- TL-WDR4310 v1 救砖
一.引出ttl线 用万用表测量,可以确定“GND”,第一个pin(焊盘为方的)为“Tx”,接下去依次为“Rx”.”GND”.”VCC“. 二.工具准备 下载tptpd软件工具,图标为 三.开始刷机 1 ...
- 坑人的 Javascript 模块化编程 require.js
坑人的 Javascript 模块化编程 require.js
- Random 中的种子怎么理解
种子就是生成随机数的根,就是产生随机数的基础.计算机的随机数都是伪随机数,以一个真随机数(种子)作为初始条件,然后用一定的算法不停迭代产生随机数.Java项目中通常是通过Math.random方法和R ...
- 黄聪:jquery+Datatables出现数据过长,表格不自动换行,columns设置width失效的办法
添加下面的CSS代码即可: table.dataTable.nowrap th, table.dataTable.nowrap td{white-space: normal !important;}