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. ...
随机推荐
- Elasticsearch 学习资料
Elasticsearch 学习资料 学习资料 网址 官方网站中文版 https://www.elastic.co/cn/ 全文搜索引擎 Elasticsearch 入门教程(阮一峰) http:// ...
- c#多线程与委托(转)
一:线程在.net中提供了两种启动线程的方式,一种是不带参数的启动方式,另一种是带参数的启动的方式.不带参数的启动方式 如果启动参数时无需其它额外的信息,可以使用ThreadStart来实例化Thre ...
- 【MatConvNet代码解析】 一些理解
1.DagNN对象的executionOrder属性 该属性是hidden属性,所以外部是访问不到的.只有dagnn.DagNN类和dagnn.Layer类可以访问到. 该属性的设置是在DagNN类的 ...
- 转JMeter ----数据库 not allowed to connect to this MySQL
测试的时候遇到报错: Cannot create PoolableConnectionFactory (null, message from server: "Host 'ceshiP ...
- kettle判断是否是数据首行(第一行)
可以用组件:分析查询(Analytic Query) 后面可以通过判断pre_id 是否为空值(null)判断.
- WPF Demo13 GridSplitter
<Window x:Class="Commands.MainWindow" xmlns="http://schemas.microsoft.com/winfx/20 ...
- python的Socket网络编程
计算机网络: 多台独立的计算机用网络通信设备连接起来的网络.实现资源共享和数据传递.比如,我们之前的学过的知识可以将D盘的一个文件传到C盘,但如果你想从你的电脑传一个文件到我的电脑上目前是做不到的; ...
- @Resource无法import相关
一.查找@Resource在那个jar包里 @Resource注解的类路径是:javax.annotation.Resource,是annotation-api.jar包中的类,是JDK1.6支持的注 ...
- ALGO-12_蓝桥杯_算法训练_幂方分解(递归)
问题描述 任何一个正整数都可以用2的幂次方表示.例如: =++ 同时约定方次用括号来表示,即ab 可表示为a(b). 由此可知,137可表示为: ()+()+() 进一步:= ++ (21用2表示) ...
- PAT 乙级 1046 划拳(15) C++版
1046. 划拳(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 划拳是古老中国酒文化的一个有趣的组成部分 ...