AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

2023-08-30 12:37:04

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	默认的模版