Angularjs+bootstrap 实现横向滑屏

本地环境：

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 样式。让内容左对齐。

优质内容筛选与推荐>>
1、gridview小注意
2、sublime text3 license & nodejs setting
3、js手写俄罗斯方块
4、.net core webapi 文件上传在 Swagger 文档中的有好提示处理
5、vs2010(中文版)自带报表的使用（二过程）

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看