Home > Developer > Web Develop
Original address: http://www.cnblogs.com/pilixiami/p/5724314.html
The Carousel directive is a control used for picture rotation, and the introduction of the Ngtouch module allows you to use the carousel control in a sliding way on the mobile side.
<!DOCTYPE HTML><HTMLNg-app= "Ui.bootstrap.demo"xmlns= "http://www.w3.org/1999/xhtml"><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Linkhref= "/content/bootstrap.css"rel= "stylesheet" /> <title></title> <Scriptsrc= "/scripts/angular.js"></Script> <Scriptsrc= "/scripts/ui-bootstrap-tpls-1.3.2.js"></Script> <Script>Angular.module ('Ui.bootstrap.demo', ['Ui.bootstrap']). Controller ('Carouseldemoctrl', function($scope) {$scope. Myinterval= -; $scope. Nowrapslides= false; $scope. Active= 0; varSlides=$scope. Slides= []; varAddslide= 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> <DivNg-controller= "Carouseldemoctrl"> <Divstyle= "height:305px"> <Uib-carouselActive= "Active"interval= "Myinterval"No-wrap= "Nowrapslides"> <Uib-slideng-repeat= "Slide in slides track by Slide.id"Index= "Slide.id"> <imgng-src= "{{slide.image}}"style= "Margin:auto;"> <Divclass= "Carousel-caption"> <h4>Slide {{Slide.id}}</h4> <P>{{Slide.text}}</P> </Div> </Uib-slide> </Uib-carousel> </Div> </Div></Body></HTML>
The effect is:
The properties that the Uib-carousel directive can use are:
| Property name | Default value | Note |
| Active | Index of the first scroll page | Index of the current scroll page |
| Interval | The time interval (in milliseconds) to scroll the page. Must be a value greater than 0 | |
| No-pause | False | When set to False, the mouse hovers over the picture and the picture pauses scrolling |
| No-transition | False | When set to False, a scrolling animation is turned on |
| No-wrap | False | When set to False, the picture loops through the |
| Template-url | Uib/template/carousel/carousel.html | The default template |
The properties that the Uib-slide directive can use are:
| Property name | Default value | Note |
| Actual | Sets an object that will be bound to the scope of the scroll page (when used to customize the scrolling page) | |
| Index | The index of the scrolling page. Must be unique | |
| Template-url | Uib/template/carousel/slide.html | The default template |
Angularjs UI Components Ui-bootstrap Share (14)--carousel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
