angularjs指令实现轮播图----swiper

时间:2022-09-26 22:39:10
'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=&quot ...

  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&period;0 &plus; vux (五)api接口封装 及 首页 轮播图制作

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

  9. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

随机推荐

  1. Nginx manifest 实现 HTML5 Application Cache

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...

  2. 模拟Linux的shell

    在学习了Linux的进程控制之后,学习了fork函数和exec函数族,通过这些个函数可以简单的实现一份shell,就是实现一份命令行解释器,当然是简单版的,实现功能如下 能执行普通的命令如ls ,ps ...

  3. 没有注册类 &lpar;异常来自 HRESULT&colon;0x80040154 &lpar;REGDB&lowbar;E&lowbar;CLASSNOTREG&rpar;&rpar;

    解决办法:在项目属性里设置“生成”=>“目标平台”为x86而不是默认的ANY CPU.

  4. Java的图片处理工具类

    import Java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  5. ptrace

    http://zhangwenxin82.blog.163.com/blog/static/114595956201171510512459/

  6. 我应该跟libuv说声对不起,我错怪了libuv&lpar;转&rpar;

    一开始,我得向Libuv库和Libuv库开发者以及相关粉丝们道一个歉,对不起,我错怪你们了.深深感到自己的无知,是多么羞愧的事情!!    事情的经过是这样的.    原先按照公司要求,我在开发Win ...

  7. 《JAVA程序设计》&lowbar;第七周学习总结

    一.学习内容 1.String类--8,1知识 Java专门提供了用来处理字符序列的String类.String类在java.lang包中,由于java.lang包中的类被默认引入,因此程序可以直接使 ...

  8. iOS &vert; 使用HBuilder进行云端打包步骤

    1.先在HBuilder本地项目中的Manifest.json文件中进行项目配置,将应用的图标和启动图,按照固定的尺寸进行配置.设置应用名称,版本号, 这里的appid不需要修改,是HBuilder自 ...

  9. ionic2&period;2&period;1 配置环境变量及创建新项目

    1,jdk的安装与环境配置 jdk下载网址 http://www.oracle.com/technetwork/java/javase/downloads/index.html, jdk环境配置  A ...

  10. 如何在ASP&period;NET Core中构造UrlHelper,及ASP&period;NET Core MVC路由讲解

    参考文章: Unable to utilize UrlHelper 除了上面参考文章中介绍的方法,其实在ASP.NET Core MVC的Filter拦截器中要使用UrlHelper非常简单.如下代码 ...