原文地址：http://www.cnblogs.com/pilixiami/p/5724314.html
Carousel指令是用于图片轮播的控件，引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件。
<!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="/Content/bootstrap.css" rel="stylesheet" /> <title></title> <script src="/Scripts/angular.js"></script> <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script> <script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('CarouselDemoCtrl', function ($scope) { $scope.myInterval = 2000; $scope.noWrapSlides = false; $scope.active = 0; var slides = $scope.slides = []; var addSlide = function () { slides.push({ image: 'http://lorempixel.com/600/300', text: 'Image1', id: 0 }); slides.push({ image: 'http://lorempixel.com/601/300', text: 'Image2', id: 1 }); }; addSlide(); }); </script> </head> <body> <div ng-controller="CarouselDemoCtrl"> <div style="height: 305px"> <uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides"> <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"> <img ng-src="{{slide.image}}" style="margin:auto;"> <div class="carousel-caption"> <h4>Slide {{slide.id}}</h4> <p>{{slide.text}}</p> </div> </uib-slide> </uib-carousel> </div> </div> </body> </html>
效果为：
uib-carousel指令可以使用的属性有：
| 属性名 | 默认值 | 备注 |
| active | 第一个滚动页的索引 | 当前滚动页的索引 |
| interval | 滚动页的时间间隔（毫秒）。必须为大于0的数值 | |
| no-pause | false | 设置为false时，鼠标悬停在图片上，图片暂停滚动 |
| no-transition | false | 设置为false时，开启滚动的动画 |
| no-wrap | false | 设置为false时，图片将循环滚动 |
| template-url | uib/template/carousel/carousel.html | 默认的模版 |
uib-slide指令可以使用的属性有：
| 属性名 | 默认值 | 备注 |
| actual | 设置一个对象，这个对象将绑定到滚动页的作用域上（用于自定义滚动页时） | |
| index | 滚动页的索引。必须唯一 | |
| template-url | uib/template/carousel/slide.html | 默认的模版 |