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. ...
随机推荐
- 弱网测试—Network-Emulator-Toolkit工具
参考别人网址:http://blog.csdn.net/no1mwb/article/details/53638681 弱网测试,属于健壮性测试:怎么样去做弱网测试呢? 一.安装弱网测试工具-Netw ...
- mysql编译安装(详细)(转载)
mysql编译安装(详细) 一.编译安装MySQL前的准备工作 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl 安装cmake,从 ...
- TextBox限制输入字母、数字、退格键
公共方法如下: /// <summary> /// 正则表达式验证只能输入数字或字母 /// </summary> /// <param name="pendi ...
- 安装Microsoft SQL server Management Studio Express 2005 错误码是29506解决方案
安装Microsoft SQL server Management Studio Express 2005,安装程序在安装此软件包时遇到一个错误,这可能表示此软件包有错.错误码是29506”权限问题. ...
- SET FMTONLY ON
有时候在执行SQL查询语句时,仅仅需要知道检索的元数据,而不是具体的数据行,可以设置SET FMTONLY ON. SET FMTONLY只将元数据返回给客户端. 语法SET FMTONLY { ON ...
- 用winrar和ftp命令实现自动备份文件并自动上传到指定的ftp服务器
这篇文章主要介绍了用winrar和ftp命令实现自动备份文件并自动上传到指定的ftp服务器的方法,需要的朋友可以参考下. http://www.jb51.net/article/50359.htm 1 ...
- 【Graphite】Graphite常用函数使用
使用Graphite进行sort排名 限制返回条数 aliasByNode(limit(sortByMaxima(summarize(EPIC.bm.00*.memory.memory.buffere ...
- Python3 读、写Excel文件
首先,简单介绍一下EXECL中工作簿和工作表的区别: 工作簿的英文是BOOK(WORKBOOK),工作表的英文是SHEET(WORKSHEET). 一个工作簿就是一个独立的文件 一个工作簿里面可以有1 ...
- jquery中each()的三种遍历用法
1.选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2.选择器+遍历 $('div').each(function ...
- 云中树莓派(2):将传感器数据上传到 AWS IoT 并利用Kibana进行展示
云中树莓派(1):环境准备 云中树莓派(2):将传感器数据上传到AWS IoT 并利用Kibana进行展示 1. 传感器安装及配置 1.1 DHT22 安装 DHT22 是一款温度与湿度传感器,它有3 ...