當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

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

發布時間：2023/12/25 综合教程 24 生活家

生活随笔收集整理的這篇文章主要介紹了 AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文地址：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>
            <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}}">
                    <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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。