'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. TP5 中引入第三方类库

    通过了解tp5的目录结构,我们知道其中有两个目录是纺织扩展类库文件的. extend是放置自定义或者其他类文件的. vendor目录是放置composer类库文件的. 当我们的第三方类库文件是下载的, ...

  2. bzoj 2806 [Ctsc2012]Cheat——广义后缀自动机+单调队列优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2806 只想着怎么用后缀数据结构做,其实应该考虑结合其他算法. 可以二分那个长度 L .设当前 ...

  3. HanLP二元核心词典详细解析

    本文分析:HanLP版本1.5.3中二元核心词典的存储与查找.当词典文件没有被缓存时,会从文本文件CoreNatureDictionary.ngram.txt中解析出来存储到TreeMap中,然后构造 ...

  4. 【转】Linux安装HDF5及遇到的问题总结

    Linux安装HDF5及遇到的问题总结 转自: http://www.linuxdiyf.com/linux/26164.html   ubuntu版本:16.04.2 64位 从HDF官网(http ...

  5. Mysql 5.7 单机单实例

    参考文章 https://www.xiaocoder.com/2017/03/17/mysql-installation-guide/ 下载5.7的mysql 社区版包 https://cdn.mys ...

  6. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  7. 什么是词性标注(POS tagging)

    词性标注也叫词类标注,POS tagging是part-of-speech tagging的缩写. 维基百科对POS Tagging的定义: In corpus linguistics, part-o ...

  8. 关于此实现不是 Windows 平台 FIPS 验证的加密算法的一部分。

    注册表进入如下路径中 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa\FipsAlgorithmPolicy 将 enable设置为0 ...

  9. 快速了解Python的定制类

    多重继承 class Student(man,oldman): pass 可以继承多个父类,拥有他们的方法,如果有父类有相同的方法,哪个在前用哪个 定制类 看到类似__slots__这种形如 __xx ...

  10. STL基础--算法(已排序数据的算法,数值算法)

    已排序数据的算法 Binary search, merge, set operations 每个已排序数据算法都有一个同名的更一般的形式 vector vec = {8,9,9,9,45,87,90} ...