Angularjs+bootstrap 实现横向滑屏
2024-08-28 11:40:12
本地环境:
AngularJS v1.3.2
angular-ui-bootstrap Version: 0.12.0 - 2014-11-16 实现代码:
Html部分
<div ng-controller="LogicCtrl" set-ng-animate="false">
<carousel>
<slide ng-repeat="slide in slides" active="slide.active"> /*
需要分页的内容,可以是图片,也可以是任意其它元素
*/ </slide>
</carousel>
</div>
Javascript部分
app.controller('LogicCtrl',['某些依赖',function(某些依赖){ var slides = $scope.slides = [];
$scope.initPage=function(){ /// 获取数据..
slides.push(dataObj); };
$scope.initPage();
}]);
还有就是在路由中配置模板与控制器的关系。就这些了...
默认的样式会在左右及下端会出现 渐变遮罩与小点导航。可以使用以下样式屏蔽。
<style type="text/css">
.carousel-indicators
{
bottom: 5px;
}
ol{
margin-bottom: -30px;
}
.carousel-indicators li
{
background-color: #000000;
}
.carousel-indicators .active
{
background-color: #cccccc;
} .carousel-control
{
display: none;
} </style>
划屏的内容默认是居中的,需要自己添加text-align=left 样式。让内容左对齐。
最新文章
- C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框
- XML-->;DTD&;Schema Notes
- jqueryEasyUI:tabs扩展:给tabs组件绑定双击事件 分类: JqueryEasyUI 2014-09-29 14:36 537人阅读 评论(0) 收藏
- u盘安装windows系统
- UVa 12299 RMQ with Shifts(移位RMQ)
- 大姨吗向左,美柚向右,女性健康APP路在何方?
- [Angularjs]ng-switch用法
- MFC学习 标签页与属性页及各常用控件使用
- Shell脚本文件操作
- 彻底理解PHP的SESSION机制
- ORACLE和MONGODB,必须也得进入。
- Jasper_table_Cloud not resolve style(s)
- 【CNMP系列】CentOS7.0下安装Nginx服务
- jdbc与mybatis区别
- 为App添加Log日志文件
- pyhive 连接 Hive 时错误
- 1006 Tick and Tick
- Python Django 学习 (二) 【Django 模型】
- IDEA 使用技巧 Update
- MapReduce编程实例5