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替换已有元素replaceChild()使用介绍
Apr 03 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
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实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
python多线程用法实例详解
2015/01/15 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python中遍历列表的方法总结
2019/06/27 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
公司道歉信范文
2014/01/09 职场文书
婚前财产公证书
2014/04/10 职场文书
2014个人年度工作总结
2014/12/15 职场文书
中学教代会开幕词
2016/03/04 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
关于Redis的主从复制及哨兵问题
2022/06/16 Redis