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