angularjs中使用轮播图指令swiper
我们在angualrjs移动开发中遇到轮播图的功能
安装 swiper npm install --save swiper 或者 bower install --save swiper
引入文件路径
<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" />
<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}}"><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: ,
});
},);
}
};
} })();
data 绑定接口返回的轮播列表 vm.home.headImgs对应轮播图返回的数据列表
<!--轮播图-->
<swipers data="vm.home.headImgs" ></swipers>
angularjs中使用轮播图指令swiper的更多相关文章
- android中广告轮播图总结
功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- 利用axure软件实现app中的轮播图功能
1.首先在axure软件中插入一张手机模型图片并调整为合适大小 2.在需要展示轮播图片位置拖入[动态面板]并且调整大小 拖入后双击动态面板,填入面板名称,并且添加面板状态(此处轮播图为三张,所以有三个 ...
- vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...
- AngularJS:实现轮播图效果
实现步骤如下: 要实现这个功能,可以http://angular-ui.github.io/bootstrap/ 中的控件实现.实现步骤如下: 1. 下载ui-bootstrap.js程序http:/ ...
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
- 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应
官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...
- 轮播图 -- view, swiper
效果图 制作步骤: 一.创建一个page 二.编写demo.wxml写界面元素 <!--miniprogram/pages/demo/demo.wxml--> <view class ...
- 轮播图插件swiper 的使用
引入文件(注:目前版本号为Swiper3.x) <link rel="stylesheet" type="text/css" href="//s ...
随机推荐
- jenkins+webhook+docker做持续集成
简介:我们现在都流行把项目封装成docker的镜像,不过实际用的时候就会发现很麻烦,我们每次更改代码了以后都要打包成docker容器 ,事实证明项目比较多的时候真的会让人崩溃,我这边用spring c ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- jQuery使用小结
$(document).ready( function(){} ); 选择器 $("p:first") 第一个元素 $("p.intro" ...
- zlog学习随笔
zlog1使用手册 Contents Chapter 1 zlog是什么? 1.1 兼容性说明 1.2 zlog 1.2 发布说明 Chapter 2 zlog不是什么? Chapter 3 ...
- setTimeout 倒计时
<script type="text/javascript"> //设定倒数秒数 var t = 10; //显示倒数秒数 function showTime(){ t ...
- CodeVS1344 线型网络
题目描述 Description 有 N ( <=20 ) 台 PC 放在机房内,现在要求由你选定一台 PC,用共 N-1 条网线从这台机器开始一台接一台地依次连接他们,最后接到哪个以及连接的顺 ...
- javascript中的apply,call,bind详解
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
- 解决NSTimer循环引用Retain Cycle问题
解决NSTimer循环引用Retain Cycle问题 iOS开发中以下的情况会产生循环引用 block delegate NSTimer 循环引用导致一些对象无法销毁,一定的情况下会对我们横须造成影 ...
- IOS的UITableView
UITableView 概述 UITableView 一般用来展示表格数据.可以滚动(继承自UIScrollView).性能极佳 UITableView分两种样式: Plain,不分组的样式 Grou ...
- 使用java API操作HDFS-相关环境的设置
用于装在编译类,即为hadoop的类路径 退出后重新登录,再使用env检查. jps可以直接使用了,表示已经设置成功. 在myclass之中创建类文件,这个myclass目录是自己创建的.