首页 > 代码库 > AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

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

2024-09-16 17:55:42   216人阅读

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分享（十四）——Carousel


联系
我们