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

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

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

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

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

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel的更多相关文章

  1. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  2. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  3. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  4. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  5. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  6. php分享十四：php接口编写

    一:加密协议选择 二:常用url传递函数介绍 urlencode 和 rawurlencode 区别是: urlencode把空格变为+号,而rawurlencode编码为20%: base64_en ...

  7. uni-app开发经验分享十四：小程序超过2M限制的方法——分包加载

      起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开"体验.但是 ...

  8. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  9. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  10. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

随机推荐

  1. Openfire基础

    网上很多openfire相关资料,这里做下学习汇总 openfire官网:http://www.igniterealtime.org/ 可以下载openfire.spark.smack安装包及源码,安 ...

  2. iOS - SQLite 数据库存储

    1.SQLite 数据库 SQLite 是一种轻型的嵌入式数据库,安卓和 iOS 开发使用的都是 SQLite 数据库.它占用资源非常低,在嵌入式设备中,可能需要几百 K 的内存数据就够了.他的处理速 ...

  3. AVSampleBufferDisplayLayer----转

    http://blog.csdn.net/fernandowei/article/details/52179631 目前大多数iOS端的视频渲染都使用OpenGLES,但如果仅仅为了渲染而不做其他的例 ...

  4. 解决JS加载速度慢

    在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...

  5. Hadoop 集群搭建

    Hadoop 集群搭建 2016-09-24 杜亦舒 目标 在3台服务器上搭建 Hadoop2.7.3 集群,然后测试验证,要能够向 HDFS 上传文件,并成功运行 mapreduce 示例程序 搭建 ...

  6. js 数组赋值问题 ：值传递还是引用？

    转载于知乎var a = [1,2,3]; var b = a; a = [4,5,6]; alert(b); //[1,2,3] 面试时被问到这样一个问题,竟然从来没试过... 当时直接的理解,数组 ...

  7. adaboost原理与实践

    Adaboost是一种迭代算法,其核心思想是针对同一个训练集训练不同的分类器(弱分类器),然后把这些弱分类器集合起来,构成一个更强的最终分类器(强分类器).其算法本身是通过改变数据分布来实现的,它根据 ...

  8. python——线程与多线程进阶

    之前我们已经学会如何在代码块中创建新的线程去执行我们要同步执行的多个任务,但是线程的世界远不止如此.接下来,我们要介绍的是整个threading模块.threading基于Java的线程模型设计.锁( ...

  9. Elasticsearch 检索

    说到查询,那么索引也是一个绕不开的话题,可以说,没有索引就没有检索,先来看一个示意图 左边是索引过程,右边是检索过程.关键的步骤是分词过程,我用等号表示这两个过程一样,而且,必须一样,这个等号并不是模 ...

  10. 20169212《Linux内核原理与分析》第四周作业

    Linux第四周作业 1. 堆栈知识 首先回顾了下堆栈相关的知识,堆栈机制是高级语言可以运行的一个基础,这一块需要重点掌握.函数发生调用时,如图 call指令:将eip的按顺序执行的下一条指令(因为在 ...