Angularjs中使用轮播图指令swiper


Posted in Javascript onMay 30, 2017

我们在angualrjs移动开发中遇到轮播图的功能

安装 swiper  npm install --save swiper   或者 bower install --save swiper

引入文件路径

<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" rel="external nofollow" />
<script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script>

指令中的编写方式

(function() {
 'use strict';
 angular
  .module('campus.core') //对应项目的module 请换成自己的模块名称
  .directive('swipers',swipers);
  swipers.$inject = ['$timeout'];
  function swipers($timeout) {
   return {
    restrict: "EA",
    scope: {
     data:"="
    },
    template: '<div class="swiper-container silder">'+
        '<ul class="swiper-wrapper">'+
        '<li class="swiper-slide" ng-repeat="item in data">'+
        '<a class="img40" href="{{item.contentUrl}}" rel="external nofollow" ><img ng-src="{{item.imgId}}" alt="" /></a>'+
        '</li>'+
        '</ul>'+
        '<div class="swiper-pagination"></div>'+
        '</div>',
    link: function(scope, element, attrs) {
       $timeout(function(){
         var swiper = new Swiper('.swiper-container', { //轮播图绑定样式名
          pagination: '.swiper-pagination',  
          paginationClickable: true,    
          autoplay: 2500,
        }); 
       },100); 
    }
   };
  }
})();

data 绑定接口返回的轮播列表 vm.home.headImgs对应轮播图返回的数据列表

<!--轮播图-->
 <swipers data="vm.home.headImgs" ></swipers>

以上所述是小编给大家介绍的Angularjs中使用轮播图指令swiper ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
JS计算斐波拉切代码实例
Sep 12 Javascript
JS代码实现页面切换效果
Jan 10 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
AngularJS路由Ui-router模块用法示例
May 29 #Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 #Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 #Javascript
Angular2使用jQuery的方法教程
May 28 #jQuery
Angular.js实现动态加载组件详解
May 28 #Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 #Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 #Javascript
You might like
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
《APMServ 5.1.2》使用图解
2006/10/23 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
第三篇Bootstrap网格基础
2016/06/21 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python如何实现机器人聊天
2020/09/10 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
怎么样写好简历中的自我评价
2013/10/25 职场文书
大学生找工作推荐信范文
2013/11/28 职场文书
事业单位考核材料
2014/05/21 职场文书
销售代理协议书
2014/09/30 职场文书
优秀教师申报材料
2014/12/16 职场文书
国庆庆典邀请函
2015/02/02 职场文书
支行行长岗位职责
2015/02/15 职场文书