<!DOCTYPE HTML><HTMLNg-app= "MYAPP"Lang= "en"><Head> <MetaCharSet= "UTF-8"> <title>AngularJS Carousel</title> <Linkhref= "Http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css"rel= "stylesheet"></Head><Body> <DivNg-controller= "Carouseldemoctrl"> <Divstyle= "height:305px"> <Carouselinterval= "Myinterval"No-wrap= "Nowrapslides"> <Slideng-repeat= "Slide in slides"Active= "Slide.active"> <imgng-src= "{{slide.image}}"style= "Margin:auto;"> <Divclass= "Carousel-caption"> <h4>Slide {{$index}}</h4> <P>{{Slide.text}}</P> </Div> </Slide> </Carousel> </Div> </Div> <Scriptsrc=".. /angular.js/1.3.13/angular.min.js "></Script> <Scriptsrc=".. /angular.js/1.4.0-beta.4/angular-animate.min.js "></Script> <Scriptsrc=".. /angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js "></Script> <Scriptsrc=".. /angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js "></Script> <Script>Angular.module ('myApp', ['Ui.bootstrap', 'nganimate']). Controller ('Carouseldemoctrl', function($scope) {
Carousel interval Time $scope. Myinterval= -; $scope. Nowrapslides= false; varSlides=$scope. Slides= []; $scope. Addslide= function () { varNewwidth= - +Slides.length+ 1; Slides.push ({image:'', Text:'Chocola & Vanilla', }); Slides.push ({image:'', Text:'Chocola & Vanilla', }); Slides.push ({image:'', Text:'Chocola & Vanilla', }); Slides.push ({image:'', Text:'Chocola & Vanilla', }); }; $scope. Addslide (); }); </Script></Body></HTML>
Note: Problems may occur with different versions of Ui-bootstrap
ANGULARJS realization of first-page carousel map